Merge pull request #15751 from zfox23/SUI/finalM1

DEV-128: Update settings screen with latest design

interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml

@@ -88,7 +88,7 @@ Rectangle {
 
     Image {
         id: accent
-        source: "../images/accent.svg"
+        source: "images/accent.svg"
         anchors.top: parent.top
         anchors.right: parent.right
         width: 60

interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml

@@ -165,11 +165,21 @@ Rectangle {
     }
 
     Image {
-        source: "../images/accent.svg"
+        source: {
+            if (root.activeTabView === "generalTabView") {
+                "images/accent1.svg"
+            } else if (root.activeTabView === "audioTabView") {
+                "images/accent2.svg"
+            } else if (root.activeTabView === "vrTabView") {
+                "images/accent3.svg"
+            } else {
+                "images/accent3.svg"
+            }
+        }
         anchors.right: parent.right
-        anchors.bottom: parent.bottom
+        anchors.top: tabContainer.bottom
-        width: 94
+        width: 106
-        height: 175
+        height: 200
     }
 
 

interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml

@@ -57,7 +57,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: volumeControlsTitle
                 text: "Volume Controls"
                 Layout.preferredWidth: parent.width
@@ -154,7 +154,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: micControlsTitle
                 text: "Default Mute Controls"
                 Layout.maximumWidth: parent.width
@@ -196,7 +196,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: inputDeviceTitle
                 text: "Which input device?"
                 Layout.maximumWidth: parent.width
@@ -291,7 +291,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: outputDeviceTitle
                 text: "Which output device?"
                 Layout.maximumWidth: parent.width

interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml

@@ -47,7 +47,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: uiControlsTitle
                 text: "User Interface"
                 Layout.maximumWidth: parent.width

interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml

@@ -51,7 +51,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: avatarNameTagsTitle
                 text: "Avatar Name Tags"
                 Layout.maximumWidth: parent.width
@@ -99,7 +99,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: performanceTitle
                 text: "Graphics Settings"
                 Layout.maximumWidth: parent.width
@@ -147,7 +147,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: cameraTitle
                 text: "Camera View"
                 Layout.maximumWidth: parent.width
@@ -199,7 +199,7 @@ Flickable {
             wrapMode: Text.Wrap
             width: paintedWidth
             height: paintedHeight
-            size: 22
+            size: 14
             color: simplifiedUI.colors.text.lightBlue
 
             MouseArea {

interface/resources/qml/hifi/simplifiedUI/settingsApp/images/accent1.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="200" viewBox="0 0 106 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L106 -9.26681e-06L83.1739 10.0481L0 0Z" fill="#FFED00"/>
+<path d="M83.1738 10.0481L106 -1.99552e-06L106 200L83.1738 10.0481Z" fill="#FF42A7"/>
+</svg>

interface/resources/qml/hifi/simplifiedUI/settingsApp/images/accent2.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="200" viewBox="0 0 106 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L106 -9.26681e-06L83.1739 10.0481L0 0Z" fill="#FF42A7"/>
+<path d="M83.1738 10.0481L106 -1.99552e-06L106 200L83.1738 10.0481Z" fill="#009EE0"/>
+</svg>

interface/resources/qml/hifi/simplifiedUI/settingsApp/images/accent3.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="200" viewBox="0 0 106 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L106 -9.26681e-06L83.1739 10.0481L0 0Z" fill="#009EE0"/>
+<path d="M83.1738 10.0481L106 -1.99552e-06L106 200L83.1738 10.0481Z" fill="#FFED00"/>
+</svg>

interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml

@@ -57,7 +57,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: controlsTitle
                 text: "VR Movement Controls"
                 Layout.maximumWidth: parent.width
@@ -143,7 +143,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: micControlsTitle
                 text: "Default Mute Controls"
                 Layout.maximumWidth: parent.width
@@ -185,7 +185,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: inputDeviceTitle
                 text: "Which input device?"
                 Layout.maximumWidth: parent.width
@@ -280,7 +280,7 @@ Flickable {
             Layout.preferredWidth: parent.width
             spacing: 0
 
-            HifiStylesUit.GraphikRegular {
+            HifiStylesUit.GraphikSemiBold {
                 id: outputDeviceTitle
                 text: "Which output device?"
                 Layout.maximumWidth: parent.width

interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml

@@ -183,7 +183,7 @@ QtObject {
 
         readonly property QtObject settings: QtObject {
             property int subtitleTopMargin: 2
-            property int settingsGroupTopMargin: 24
+            property int settingsGroupTopMargin: 14
             property int spacingBetweenSettings: 48
             property int spacingBetweenRadiobuttons: 14
         }