diff --git a/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass b/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass index e69de29..bfc168a 100644 --- a/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass +++ b/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 diff --git a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass b/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass index defd386..d7f8c22 100644 --- a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass +++ b/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 diff --git a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass b/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass index 0b214c6..aa37670 100644 --- a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass +++ b/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 diff --git a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx b/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx index 14858df..82c1054 100644 --- a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx +++ b/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(''))