Updated components based on variables

src/components/PageComponents/Color-Converter/ColorConverterComponent.sass

@@ -0,0 +1,13 @@
+@use '/src/assets/css/variables.sass' as vars
+@use '/src/assets/css/viewport.sass' as view
+@use 'sass:color'
+
+.section
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  padding: 2rem
+  border: 2px solid color.adjust(vars.$background, $lightness: 6%)
+  border-radius: vars.$borderRadius
+  color: #ffffff
+  gap: 2rem

src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass

@@ -7,8 +7,9 @@
   flex-direction: column
   align-items: flex-start
   padding: 2rem
-  border: 1px solid rgba(255, 255, 255, 0.3)
-  border-radius: 16px
+  border: vars.$componentBorder
+  border-radius: vars.$borderRadius
+  background-color: vars.$componentBackground
   color: #ffffff
   font-family: 'Inter', sans-serif
   gap: 2rem

src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass

@@ -10,8 +10,9 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
   flex-direction: row
   align-items: flex-start
   padding: 2rem
-  border: 1px solid rgba(255, 255, 255, 0.3)
-  border-radius: 16px
+  border: vars.$componentBorder
+  border-radius: vars.$borderRadius
+  background-color: vars.$componentBackground
   color: #ffffff
   font-family: 'Inter', sans-serif
   gap: 2rem
@@ -40,10 +41,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
   flex-direction: column
 
 .slider--group
-  // grid-area: slider--group
   padding: 0 0 0 1rem
   flex-grow: 0
 
+  @media screen and (max-width: view.$tablet)
+    padding: 0 2rem 0 2rem
+    justify-content: center
+    align-items: center
+
 .display--group
   padding: 3rem 1rem 1rem 1rem
 
@@ -101,7 +106,7 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
     letter-spacing: 1px
     font-size: 1rem
     font-weight: 500
-    // font-family: 'Inter'
+    font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily
 
 .button--group
   display: flex
@@ -160,6 +165,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
       outline: none
       box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
 
+  @media screen and (max-width: view.$tablet)
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    text-align: center
+    width: 100vw
+
 .alert
   border-radius: 6px
   padding: 1rem 1.25rem

src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx

@@ -25,7 +25,7 @@ export default () => {
     if (lowercase()) characters += 'abcdefghijklmnopqrstuvwxyz'
     if (numbers()) characters += '0123456789'
     if (symbols()) characters += '!@#$%^&*()_+-=[]{}|;:,.<>?~'
-    if (emojis()) characters += '😊🙂😅🤩😜😝🐯🐱🐵🦊🦁🐷🐮🧭'
+    if (emojis()) characters += '😊🙂😅🤩😜😝🐯🐱🐵🦊🦁🐷🐮🧭🦄🥝🏛️'
 
     let passwordArray = Array.from({ length: length() }, () => characters[Math.floor(Math.random() * characters.length)])
     setPassword(passwordArray.join(''))