diff --git a/src/assets/layouts/tab.svg b/src/assets/layouts/tab.svg new file mode 100644 index 0000000..432e632 --- /dev/null +++ b/src/assets/layouts/tab.svg @@ -0,0 +1,17 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index d30715a..0f2ac47 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -105,7 +105,8 @@ justify-content: flex-start; h4 { - font-size: 1.6rem; + font-size: 1.4rem; + font-weight: 600; color: var(--black); flex-grow: 1; @@ -200,7 +201,6 @@ $block-padding: 0 2rem; span { font-size: 1rem; color: var(--grey); - font-weight: 500; } } } @@ -345,7 +345,6 @@ $block-padding: 0 2rem; span { font-size: 1rem; color: var(--grey); - font-weight: 500; } } } \ No newline at end of file diff --git a/src/components/tabs/Tabs.module.scss b/src/components/tabs/Tabs.module.scss index 7fa6c16..b0fb6ce 100644 --- a/src/components/tabs/Tabs.module.scss +++ b/src/components/tabs/Tabs.module.scss @@ -1,4 +1,4 @@ -$tab-width: 95vw; +$tab-width: 87vw; .tabs { position: fixed; @@ -6,13 +6,13 @@ $tab-width: 95vw; width: $tab-width; left: calc((100vw - #{$tab-width}) / 2); display: flex; - background-color: white; - border-radius: 1.5rem; - box-shadow: 0px 0px 10px -5px var(--grey); height: 5rem; align-items: center; justify-content: center; z-index: 1; + background-image: url('../../assets/layouts/tab.svg'); + background-size: 100% 100%; + background-position: center; button, a { width: calc(#{$tab-width} / 5); @@ -55,9 +55,10 @@ $tab-width: 95vw; .utility { width: calc(#{$tab-width} / 5); + transform: translateY(-2.5rem); button { - box-shadow: 0px 0px 2px var(--red); + box-shadow: 0px 0px 10px -4px var(--grey); width: 5rem; height: 5rem; border-radius: 50%; @@ -65,6 +66,7 @@ $tab-width: 95vw; align-items: center; justify-content: center; margin: 0 auto; + background-color: white; svg { fill: var(--red);