feat(eww): design quick settings buttons

config/eww/quick-settings/quick-settings.scss

@@ -31,8 +31,8 @@
 
 .quick-settings {
   font-size: 30px;
-  min-height: 600px;
+  min-height: 1000px;
-  min-width: 360px;
+  min-width: 500px;
   padding: 0px 0px 0px 0px;
   background-color: $bg;
   border-top-right-radius: 0px;
@@ -41,3 +41,69 @@
   border-bottom-right-radius: 30px;
   border: 2px solid $contrastbg;
 }
+
+.title {
+  font-size: 22px;
+  margin-top: 30px;
+}
+
+.grid-label {
+  font-size: 30px;
+  margin-left: 15px;
+  margin-right: 10px;
+}
+
+.grid-chev {
+  margin-left: -10px;
+
+  font-size: 40px;
+  margin-right: 0px;
+}
+
+.button-grid {
+  font-size: 10px;
+  min-height: 160px;
+  min-width: 470px;
+  background-color: $bgfull;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  border-radius: 15px;
+  margin-top: 30px;
+}
+
+.button-row {
+  min-height: 70px;
+  min-width: 450px;
+}
+
+.grid-button {
+  min-height: 65px;
+  min-width: 70px;
+  margin: 15px;
+}
+
+.left-part {
+  background: #1b1b1b;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  border-left: 2px solid $contrastbg;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+}
+
+.right-part {
+  background: #1b1b1b;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+  border-right: 2px solid $contrastbg;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+}
+
+.left-part:hover,
+.right-part:hover {
+  color: $contrastbg;
+  border: 2px solid $contrastbg;
+  border-radius: 7px;
+  transition: all 0.5s ease-in-out;
+}

config/eww/quick-settings/quick-settings.yuck

@@ -55,8 +55,189 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defwidget quick-settings []
-  (box :class "quick-settings"
+  (box  :class "quick-settings"
-       :orientation "h"
+        :orientation "v"
+        :space-evenly false
+    (label :text "Control Center"
+           :class "title"
+           :xalign 0.04
+    )
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    ;; Button Grid
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    (box  :class "button-grid"
+          :orientation "v"
+          :valign "start"
+          :width 0
+          :height 0
+          :halign "center"
+          :space-evenly true
+      ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+      ;; Row ONE
+      ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+      (box  :class "button-row"
+            :orientation "h"
+            :space-evenly true
+            :width 0
+            :height 0
+            :halign "center"
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+      )
+      ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+      ;; Row TWO
+      ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+      (box  :class "button-row"
+            :orientation "h"
+            :space-evenly true
+            :width 0
+            :height 0
+            :halign "center"
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰖩 "
+                    :class "grid-label"
+            )
+          )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+      )
+    )
   )
 )
 (defwindow quick-settings-reveal

config/hypr/main.conf

@@ -30,7 +30,7 @@ exec-once = $HYPR_PATH/osk-toggle.sh getState
 # sometimes waybar starts after and stops me from pressing eww buttons
 exec-once = bash -c "sleep 0.5; eww reload"
 
-exec-once = bash -c "grep -q 󰣐 $HOME/.config/.heart && eww open heart && sleep 0.5 && eww update heart-ts=true"
+exec-once = bash -c "grep -q 󰣐 $HOME/.config/.heart && sleep 0.6 && eww open heart && eww update heart-ts=true"
 
 exec-once = gnome-keyring-daemon --start --components=secrets
 exec-once = squeekboard