6 files changed, 29 insertions, 10 deletions

diff --git a/gui/theme/portrait_mdpi/images/tab_display.png b/gui/theme/portrait_mdpi/images/tab_display.png
new file mode 100644
index 000000000..5f86a3577
--- /dev/null
+++ b/gui/theme/portrait_mdpi/images/tab_display.png
diff --git a/gui/theme/portrait_mdpi/images/tab_general.png b/gui/theme/portrait_mdpi/images/tab_general.png
new file mode 100644
index 000000000..b78e56601
--- /dev/null
+++ b/gui/theme/portrait_mdpi/images/tab_general.png
diff --git a/gui/theme/portrait_mdpi/images/tab_language.png b/gui/theme/portrait_mdpi/images/tab_language.png
new file mode 100644
index 000000000..3cdf63100
--- /dev/null
+++ b/gui/theme/portrait_mdpi/images/tab_language.png
diff --git a/gui/theme/portrait_mdpi/images/tab_timezone.png b/gui/theme/portrait_mdpi/images/tab_timezone.png
new file mode 100644
index 000000000..c6f05a82d
--- /dev/null
+++ b/gui/theme/portrait_mdpi/images/tab_timezone.png
diff --git a/gui/theme/portrait_mdpi/images/tab_vibration.png b/gui/theme/portrait_mdpi/images/tab_vibration.png
new file mode 100644
index 000000000..9b7582326
--- /dev/null
+++ b/gui/theme/portrait_mdpi/images/tab_vibration.png
diff --git a/gui/theme/portrait_mdpi/ui.xml b/gui/theme/portrait_mdpi/ui.xml
index dd09577b3..4d002ff57 100644
--- a/gui/theme/portrait_mdpi/ui.xml
+++ b/gui/theme/portrait_mdpi/ui.xml
@@ -53,6 +53,11 @@
 		<image name="slider_touch" filename="slider_touch"/>
 		<image name="handle" filename="handle"/>
 		<image name="cursor" filename="cursor" retainaspect="1"/>
+		<image name="tab_general" filename="tab_general" retainaspect="1"/>
+		<image name="tab_timezone" filename="tab_timezone" retainaspect="1"/>
+		<image name="tab_display" filename="tab_display" retainaspect="1"/>
+		<image name="tab_vibration" filename="tab_vibration" retainaspect="1"/>
+		<image name="tab_language" filename="tab_language" retainaspect="1"/>
 
 		<image name="backspace" filename="backspace" retainaspect="1"/>
 		<image name="enter" filename="enter" retainaspect="1"/>
@@ -87,6 +92,7 @@
 		<variable name="indent_right" value="465"/>
 		<variable name="tab_height" value="40"/>
 		<variable name="tab_indicator_height" value="3"/>
+		<variable name="tab_y" value="130"/>
 		<variable name="tab3_width" value="160"/>
 		<variable name="tab4_width" value="120"/>
 		<variable name="tab5_width" value="96"/>
@@ -98,6 +104,10 @@
 		<variable name="tab5_col3_x" value="192"/>
 		<variable name="tab5_col4_x" value="288"/>
 		<variable name="tab5_col5_x" value="384"/>
+		<variable name="tab5_centered_col1_x" value="48"/>
+		<variable name="tab5_centered_col2_x" value="144"/>
+		<variable name="tab5_centered_col4_x" value="336"/>
+		<variable name="tab5_centered_col5_x" value="432"/>
 		<variable name="btn3_col2_x" value="170"/>
 		<variable name="btn3_col3_x" value="325"/>
 		<variable name="btn4_col2_x" value="131"/>
@@ -166,6 +176,7 @@
 		<variable name="keyboard_terminal_y" value="422"/>
 		<variable name="background_color" value="#1A1A1A"/>
 		<variable name="accent_color" value="#0090CA"/>
+		<variable name="accent_color_semitransparent" value="#0090CA30"/>
 		<variable name="text_color" value="#EEEEEE"/>
 		<variable name="text_button_color" value="#EEEEEE"/>
 		<variable name="text_success_color" value="#76FF03"/>
@@ -466,6 +477,10 @@
 		</template>
 
 		<template name="tabs_backup">
+			<fill color="%accent_color%">
+				<placement x="0" y="row1_y" w="%screen_width%" h="tab_height"/>
+			</fill>
+
 			<button style="tab">
 				<placement x="0" y="%row1_y%" w="%tab3_width%" h="%tab_height%"/>
 				<text>{@tab_backup=BACKUP}</text>
@@ -480,33 +495,37 @@
 		</template>
 
 		<template name="tabs_settings">
+			<fill color="%accent_color%">
+				<placement x="0" y="row1_y" w="%screen_width%" h="tab_height"/>
+			</fill>
+
 			<button style="tab">
-				<placement x="0" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
-				<text>{@tab_general=GENERAL}</text>
+				<placement x="%tab5_centered_col1_x%" y="%tab_y%" placement="4"/>
+				<image resource="tab_general"/>
 				<action function="page">settings</action>
 			</button>
 
 			<button style="tab">
-				<placement x="%tab5_col2_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
-				<text>{@tab_time_zone=TIME ZONE}</text>
+				<placement x="%tab5_centered_col2_x%" y="%tab_y%" placement="4"/>
+				<image resource="tab_timezone"/>
 				<action function="page">settings_timezone</action>
 			</button>
 
 			<button style="tab">
-				<placement x="%tab5_col3_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
-				<text>{@tab_screen=SCREEN}</text>
+				<placement x="%center_x%" y="%tab_y%" placement="4"/>
+				<image resource="tab_display"/>
 				<action function="page">settings_screen</action>
 			</button>
 
 			<button style="tab">
-				<placement x="%tab5_col4_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
-				<text>{@tab_vibration=VIBRATION}</text>
+				<placement x="%tab5_centered_col4_x%" y="%tab_y%" placement="4"/>
+				<image resource="tab_vibration"/>
 				<action function="page">settings_vibration</action>
 			</button>
 
 			<button style="tab">
-				<placement x="%tab5_col5_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
-				<text>{@tab_language=LANGUAGE}</text>
+				<placement x="%tab5_centered_col5_x%" y="%tab_y%" placement="4"/>
+				<image resource="tab_language"/>
 				<action function="page">settings_language</action>
 			</button>
 		</template>