PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated components based on variables

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-05 11:06:31 +08:00
parent de1952b859
commit 2e04c6ce76
4 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/PageComponents/Color-Converter/ColorConverterComponent.sass
View file

@ -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

5
src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass
View file

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

21
src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass
View file

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

2
src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx
View file

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