From c2158b177e498e94296afe7ae4371e2858df9776 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Wed, 12 Feb 2025 10:24:08 -0600 Subject: [PATCH] CSS lint and style fix --- src/index.css | 4 +- src/pages/settings/Settings.tsx | 2 +- src/styles/ActionIcon.module.css | 128 ++++++++++---------- src/styles/Button.module.css | 131 ++++++++++---------- src/styles/Menu.module.css | 16 +-- src/styles/Modal.module.css | 109 +++++++++-------- src/styles/MultiSelect.module.css | 82 +++++++------ src/styles/NavLink.module.css | 42 +++---- src/styles/Popover.module.css | 8 +- src/styles/Select.module.css | 69 ++++++----- src/styles/Stack.module.css | 6 +- src/styles/Tabs.module.css | 45 ++++--- src/styles/Text.module.css | 193 +++++++++++++++--------------- src/styles/TextInput.module.css | 26 ++-- src/types/index.ts | 2 +- 15 files changed, 431 insertions(+), 432 deletions(-) diff --git a/src/index.css b/src/index.css index 74b62f5..453e692 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,5 @@ -@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap"); .Toastify__toast-theme--light { backdrop-filter: blur(10px) !important; -} \ No newline at end of file +} diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 08ef461..68971b7 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -47,7 +47,7 @@ export function Settings() { className={tabClasses.settingsTabs} classNames={tabClasses} > - + {isMobile ? : 'Personal Info'} diff --git a/src/styles/ActionIcon.module.css b/src/styles/ActionIcon.module.css index 96bdcdb..dbdbc7c 100644 --- a/src/styles/ActionIcon.module.css +++ b/src/styles/ActionIcon.module.css @@ -1,74 +1,74 @@ .backButton { - &.root { - background-color: transparent !important; - color: var(--color-text-pri) !important; - width: 2rem; - height: 2rem; - margin-right: 1rem; - margin-top: 1.5rem; - .icon { - font-size: 24px; - } - .loader { - display: none; - } - :hover { - background-color: transparent !important; - color: var(--color-text-pri) !important; - } - } + &.root { + background-color: transparent !important; + color: var(--color-text-pri) !important; + width: 2rem; + height: 2rem; + margin-right: 1rem; + margin-top: 1.5rem; + .icon { + font-size: 24px; + } + .loader { + display: none; + } + :hover { + background-color: transparent !important; + color: var(--color-text-pri) !important; + } + } } .editButton { - &.root { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - .icon { - font-size: 24px; - } - .loader { - display: none; - } - :hover { - background-color: var(--color-text-pri) !important; - color: var(--color-text-acc) !important; - } - } + &.root { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + .icon { + font-size: 24px; + } + .loader { + display: none; + } + :hover { + background-color: var(--color-text-pri) !important; + color: var(--color-text-acc) !important; + } + } } .themeEditButton { - &.root { - background-color: white !important; - .icon { - font-size: 24px; - } - .loader { - display: none; - } - :hover { - background-color: var(--color-text-pri) !important; - color: var(--color-text-acc) !important; - } - } + &.root { + background-color: white !important; + .icon { + font-size: 24px; + } + .loader { + display: none; + } + :hover { + background-color: var(--color-text-pri) !important; + color: var(--color-text-acc) !important; + } + } } .menuActions { - &.root { - transition: all .1s ease; - width: 40px; - height: 30px; - border-radius: 10px; - border: none; - .icon { - font-size: 24px; - } - .loader { - display: none; - } - :hover { - background-color: var(--color-text-pri) !important; - color: var(--color-text-acc) !important; - transition: all .1s ease; - } - } -} \ No newline at end of file + &.root { + transition: all .1s ease; + width: 40px; + height: 30px; + border-radius: 10px; + border: none; + .icon { + font-size: 24px; + } + .loader { + display: none; + } + :hover { + background-color: var(--color-text-pri) !important; + color: var(--color-text-acc) !important; + transition: all .1s ease; + } + } +} diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css index 9c1de2e..7951b07 100644 --- a/src/styles/Button.module.css +++ b/src/styles/Button.module.css @@ -1,76 +1,75 @@ .settingsButton { - &.root { - width: 2rem; - height: 2rem; - padding: 0px; - margin: 0px; - position: fixed; - bottom: 10px; - left: 10px; - color: var(--color-text-pri); - background-color: var(--color-background); - border-radius: 100%; - border: solid 2px var(--color-text-pri); - cursor: pointer; - - } - &:hover { - background-color: var(--color-background) !important; - color: var(--color-text-pri) !important; - } + &.root { + width: 2rem; + height: 2rem; + padding: 0px; + margin: 0px; + position: fixed; + bottom: 10px; + left: 10px; + color: var(--color-text-pri); + background-color: var(--color-background); + border-radius: 100%; + border: solid 2px var(--color-text-pri); + cursor: pointer; + } + &:hover { + background-color: var(--color-background) !important; + color: var(--color-text-pri) !important; + } } -.themeButton{ +.themeButton { &.root { - font-size: 1em; - font-weight:500; - margin: 10px; - width:128px; - line-height: 3rem; - text-align: center; - text-transform: uppercase; - border-radius: 1em; - height: 3.5rem; - } + font-size: 1em; + font-weight: 500; + margin: 10px; + width: 128px; + line-height: 3rem; + text-align: center; + text-transform: uppercase; + border-radius: 1em; + height: 3.5rem; + } } -.wakeButton{ +.wakeButton { &.root { - font-size: 1em; - font-weight:500; - margin-bottom: 10px; - width:72px; - height:72px; - line-height: 3rem; - text-align: center; - text-transform: uppercase; - border-radius: 1em; - color: var(--color-text-acc); - background-color: var(--color-background); - border: solid 2px var(--color-text-pri); - transition: all .2s ease; - &:hover { - color: var(--color-background); - background-color: var(--color-text-pri); - border: solid 2px var(--color-text-acc); - } - } + font-size: 1em; + font-weight: 500; + margin-bottom: 10px; + width: 72px; + height: 72px; + line-height: 3rem; + text-align: center; + text-transform: uppercase; + border-radius: 1em; + color: var(--color-text-acc); + background-color: var(--color-background); + border: solid 2px var(--color-text-pri); + transition: all .2s ease; + &:hover { + color: var(--color-background); + background-color: var(--color-text-pri); + border: solid 2px var(--color-text-acc); + } + } } .tableButton { - &.root { - &.loader{ - display: none; - } - width: 2rem; - height: 2rem; - padding: 0px; - margin: 0px; - background-color: var(--color-text-pri); - color: var(--color-text-acc); - } - &:hover { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - } -} \ No newline at end of file + &.root { + &.loader { + display: none; + } + width: 2rem; + height: 2rem; + padding: 0px; + margin: 0px; + background-color: var(--color-text-pri); + color: var(--color-text-acc); + } + &:hover { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + } +} diff --git a/src/styles/Menu.module.css b/src/styles/Menu.module.css index 35c789b..151e2a3 100644 --- a/src/styles/Menu.module.css +++ b/src/styles/Menu.module.css @@ -1,13 +1,13 @@ .dropdown { - color: var(--color-text-pri); - border-color: var(--color-text-pri) !important; + color: var(--color-text-pri); + border-color: var(--color-text-pri) !important; } .item { - &:hover { - background-color: var(--color-text-pri); - color: var(--color-background) - } + &:hover { + background-color: var(--color-text-pri); + color: var(--color-background); + } } .label { - color: var(--color-text-pri) !important; -} \ No newline at end of file + color: var(--color-text-pri) !important; +} diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css index d1f501f..3b23c49 100644 --- a/src/styles/Modal.module.css +++ b/src/styles/Modal.module.css @@ -1,58 +1,57 @@ .helpModal { - &.root { - .content { - border-radius: 15px; - color: var(--color-text-pri); - background-color: var(--color-background); - .header { - color: var(--color-text-pri); - .title { - font-size: 22px; - } - .close { - color: white; - background-color: var(--mantine-color-red-6); - max-width: 20px!important; - max-height: 20px!important; - &:hover { - color: var(--mantine-color-red-1); - background-color: var(--mantine-color-red-4); - } - } - } - .body { - margin-top: 1rem; - } - } - } - + &.root { + .content { + border-radius: 15px; + color: var(--color-text-pri); + background-color: var(--color-background); + .header { + color: var(--color-text-pri); + .title { + font-size: 22px; + } + .close { + color: white; + background-color: var(--mantine-color-red-6); + max-width: 20px !important; + max-height: 20px !important; + &:hover { + color: var(--mantine-color-red-1); + background-color: var(--mantine-color-red-4); + } + } + } + .body { + margin-top: 1rem; + } + } + } } .editThemeModal { - &.root { - .content { - justify-content: center; - align-content: center; - color: var(--color-text-pri); - background-color: var(--color-background); - .header { - color: var(--color-text-pri); - background-color: var(--color-text-acc); - .close { - color: white; - background-color: var(--mantine-color-red-6); - max-width: 20px!important; - max-height: 20px!important; - &:hover { - color: var(--mantine-color-red-1); - background-color: var(--mantine-color-red-4); - } - } - } - .body { - display: flex; - flex-direction: column; - align-items: center; - } - } - } -} \ No newline at end of file + &.root { + .content { + justify-content: center; + align-content: center; + color: var(--color-text-pri); + background-color: var(--color-background); + .header { + color: var(--color-text-pri); + background-color: var(--color-text-acc); + .close { + color: white; + background-color: var(--mantine-color-red-6); + max-width: 20px !important; + max-height: 20px !important; + &:hover { + color: var(--mantine-color-red-1); + background-color: var(--mantine-color-red-4); + } + } + } + .body { + display: flex; + flex-direction: column; + align-items: center; + } + } + } +} diff --git a/src/styles/MultiSelect.module.css b/src/styles/MultiSelect.module.css index a04afbb..e7b9eb5 100644 --- a/src/styles/MultiSelect.module.css +++ b/src/styles/MultiSelect.module.css @@ -1,61 +1,59 @@ .label { - margin-bottom: 5px !important; - color: var(--color-text-pri) !important; - font-size: 14px !important; + margin-bottom: 5px !important; + color: var(--color-text-pri) !important; + font-size: 14px !important; } .input { - border-color: light-dark(var(--mantine-color-appGray-2), white) !important; - background-color: var(--color-background) !important; - color: var(--color-text-pri) !important; - &:focus { - border-color: var(--color-text-pri) !important; - } - display: flex !important; - overflow: clip !important; - height: 36px !important; + border-color: light-dark(var(--mantine-color-appGray-2), white) !important; + background-color: var(--color-background) !important; + color: var(--color-text-pri) !important; + &:focus { + border-color: var(--color-text-pri) !important; + } + display: flex !important; + overflow: clip !important; + height: 36px !important; } .options { - .option { - color: var(--color-text-pri) !important; - font-size: 14px !important; - /* applies styles to selected item */ - &[data-checked] { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - &:hover { - background-color: var(--color-text-acc) !important; - color: var(--color-background) !important; - } - } + .option { + color: var(--color-text-pri) !important; + font-size: 14px !important; + /* applies styles to selected item */ + &[data-checked] { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + &:hover { + background-color: var(--color-text-acc) !important; + color: var(--color-background) !important; + } + } - /* applies styles to hovered item (with mouse or keyboard) */ - &:hover { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - } - } + /* applies styles to hovered item (with mouse or keyboard) */ + &:hover { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + } + } } .dropdown { - background-color: var(--color-background) !important; + background-color: var(--color-background) !important; } .pillsList { - .pill { - display: none !important; - } + .pill { + display: none !important; + } } - .inputField { - color: var(--color-text-acc) !important; - &::placeholder { - color: var(--color-text-acc) !important; - } + color: var(--color-text-acc) !important; + &::placeholder { + color: var(--color-text-acc) !important; + } } .root { - - width: 45% !important; -} \ No newline at end of file + width: 45% !important; +} diff --git a/src/styles/NavLink.module.css b/src/styles/NavLink.module.css index 41795ed..7ed0ce4 100644 --- a/src/styles/NavLink.module.css +++ b/src/styles/NavLink.module.css @@ -1,22 +1,22 @@ .defaultNavLink { - &.root { - display: flex; - align-items: center; - justify-content: space-between; - border-radius: 4px; - color: var(--color-text-pri); - background-color: var(--color-background); - cursor: pointer; - } - - &.root:hover { - border-radius: 4px; - color: var(--color-background); - background-color: var(--color-text-acc); - } - - &.chevron { - width: 10px !important; - height: 10px !important; - } -} \ No newline at end of file + &.root { + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 4px; + color: var(--color-text-pri); + background-color: var(--color-background); + cursor: pointer; + } + + &.root:hover { + border-radius: 4px; + color: var(--color-background); + background-color: var(--color-text-acc); + } + + &.chevron { + width: 10px !important; + height: 10px !important; + } +} diff --git a/src/styles/Popover.module.css b/src/styles/Popover.module.css index 39dadc1..f82ad1a 100644 --- a/src/styles/Popover.module.css +++ b/src/styles/Popover.module.css @@ -1,5 +1,5 @@ .dropdown { - background-color: var(--color-background); - border: solid 2px var(--color-border); - border-color: var(--color-border); -} \ No newline at end of file + background-color: var(--color-background); + border: solid 2px var(--color-border); + border-color: var(--color-border); +} diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css index 67a7076..cac50f5 100644 --- a/src/styles/Select.module.css +++ b/src/styles/Select.module.css @@ -1,46 +1,45 @@ .label { - margin-bottom: 5px !important; - color: var(--color-text-pri) !important; - font-size: 14px !important; + margin-bottom: 5px !important; + color: var(--color-text-pri) !important; + font-size: 14px !important; } .input { - border-color: light-dark(var(--mantine-color-appGray-2), white) !important; - background-color: var(--color-background) !important; - color: var(--color-text-pri) !important; - &:focus { - border-color: var(--color-text-pri) !important; - } - display: flex !important; - overflow: clip !important; - height: 36px !important; - &::placeholder { - color: var(--color-text-acc) !important; - } - + border-color: light-dark(var(--mantine-color-appGray-2), white) !important; + background-color: var(--color-background) !important; + color: var(--color-text-pri) !important; + &:focus { + border-color: var(--color-text-pri) !important; + } + display: flex !important; + overflow: clip !important; + height: 36px !important; + &::placeholder { + color: var(--color-text-acc) !important; + } } .options { - .option { - color: var(--color-text-pri) !important; - font-size: 14px !important; - /* applies styles to selected item */ - &[data-checked] { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - &:hover { - background-color: var(--color-text-acc) !important; - color: var(--color-background) !important; - } - } + .option { + color: var(--color-text-pri) !important; + font-size: 14px !important; + /* applies styles to selected item */ + &[data-checked] { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + &:hover { + background-color: var(--color-text-acc) !important; + color: var(--color-background) !important; + } + } - /* applies styles to hovered item (with mouse or keyboard) */ - &:hover { - background-color: var(--color-text-acc) !important; - color: var(--color-text-pri) !important; - } - } + /* applies styles to hovered item (with mouse or keyboard) */ + &:hover { + background-color: var(--color-text-acc) !important; + color: var(--color-text-pri) !important; + } + } } .dropdown { - background-color: var(--color-background); + background-color: var(--color-background); } diff --git a/src/styles/Stack.module.css b/src/styles/Stack.module.css index 7e1ad65..6912859 100644 --- a/src/styles/Stack.module.css +++ b/src/styles/Stack.module.css @@ -1,5 +1,5 @@ .containerStack { - align-items: stretch; + align-items: stretch; display: grid; grid-column-gap: 20px; grid-row-gap: 1vh; @@ -56,7 +56,7 @@ border-radius: 1em; } -.navItem{ +.navItem { gap: 0; line-height: 1.5rem; margin: 0; @@ -70,4 +70,4 @@ height: 150px; background-color: var(--color-search-background); border-radius: 10px; -} \ No newline at end of file +} diff --git a/src/styles/Tabs.module.css b/src/styles/Tabs.module.css index a7760bc..aa26c99 100644 --- a/src/styles/Tabs.module.css +++ b/src/styles/Tabs.module.css @@ -1,25 +1,24 @@ .settingsTabs { - @media (max-width: 600px) { - .panel { - padding-left: 0 !important; - } - } - .panel { - padding-left: 2rem; - } - .tab { - color: var(--color-text-pri); - border-color: var(--color-text-acc); - &:hover { - color: var(--color-background); - background-color: var(--color-text-acc); - } - &[data-active=true]{ - border-color: var(--color-text-pri); - } - } - .list::before { - border-color: var(--color-text-acc); - } + @media (max-width: 600px) { + .panel { + padding-left: 0 !important; + } + } + .panel { + padding-left: 2rem; + } + .tab { + color: var(--color-text-pri); + border-color: var(--color-text-acc); + &:hover { + color: var(--color-background); + background-color: var(--color-text-acc); + } + &[data-active="true"] { + border-color: var(--color-text-pri); + } + } + .list::before { + border-color: var(--color-text-acc); + } } - diff --git a/src/styles/Text.module.css b/src/styles/Text.module.css index 3b1f5a6..72478c5 100644 --- a/src/styles/Text.module.css +++ b/src/styles/Text.module.css @@ -1,137 +1,138 @@ .greeting { &.root { - margin: 0; - margin-left: .5em; - margin-right: .5em; - padding: 0; - text-align: left; - font-size: 3.5em; - font-weight: 400; - width: max-content; - color: var(--color-text-acc); - } + margin: 0; + margin-left: .5em; + margin-right: .5em; + padding: 0; + text-align: left; + font-size: 3.5em; + font-weight: 400; + width: max-content; + color: var(--color-text-acc); + } } .dateTime { - &.root { - display: flex; - font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important; - font-size: 28px; - margin: 0; - padding: 0; - margin-right: 1em; - text-transform: uppercase; - font-weight: 300; - color: var(--color-text-pri); - } + &.root { + display: flex; + font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, + sans-serif !important; + font-size: 28px; + margin: 0; + padding: 0; + margin-right: 1em; + text-transform: uppercase; + font-weight: 300; + color: var(--color-text-pri); + } } .sectionTitle { - &.root { - text-decoration: underline; - font-size: 20px; - font-weight: 200; - font-style: italic; - height: 10px; - text-transform: uppercase; - margin-top: 20px; - margin-bottom: 20px; - color: var(--color-text-pri); - } + &.root { + text-decoration: underline; + font-size: 20px; + font-weight: 200; + font-style: italic; + height: 10px; + text-transform: uppercase; + margin-top: 20px; + margin-bottom: 20px; + color: var(--color-text-pri); + } } .label { - &.root { - color: var(--color-text-pri); - } + &.root { + color: var(--color-text-pri); + } } .appName { - &.root { - font-weight: 400; - font-size: 11px; - font-style: normal; - color: var(--color-text-pri); - font-family: 'Jost', sans-serif; - margin: 0; - } + &.root { + font-weight: 400; + font-size: 11px; + font-style: normal; + color: var(--color-text-pri); + font-family: "Jost", sans-serif; + margin: 0; + } } .appUrl { - &.root { - font-size: 11px; - font-weight: 400; - font-style: italic; - text-transform: uppercase; - color: var(--color-text-acc); - margin: 0; - } + &.root { + font-size: 11px; + font-weight: 400; + font-style: italic; + text-transform: uppercase; + color: var(--color-text-acc); + margin: 0; + } } .linkCategory { - &.root { - font-size: 14px; - font-weight: 400; - height: 10px; - color: var(--color-text-acc); - text-transform: uppercase; - margin-top: 20px; - margin-bottom: 20px; - } + &.root { + font-size: 14px; + font-weight: 400; + height: 10px; + color: var(--color-text-acc); + text-transform: uppercase; + margin-top: 20px; + margin-bottom: 20px; + } } .linkItem { - &.root { - display: block; - font-size: 14px; - line-height: 2; - color: var(--color-text-pri); - &:hover { - text-decoration: underline; - } - } + &.root { + display: block; + font-size: 14px; + line-height: 2; + color: var(--color-text-pri); + &:hover { + text-decoration: underline; + } + } } .settingsTitle { - &.root { - font-size: 32px; - font-weight: bold; - padding-top: 1.5rem; - color: var(--color-text-pri); - } + &.root { + font-size: 32px; + font-weight: bold; + padding-top: 1.5rem; + color: var(--color-text-pri); + } } .settingsSubTitle { - &.root { - font-size: 24px; - font-weight: bold; - padding-top: 1.5rem; - color: var(--color-text-pri); - } + &.root { + font-size: 24px; + font-weight: bold; + padding-top: 1.5rem; + color: var(--color-text-pri); + } } .settingsLink { - &.root { - font-size: 1.25em; - display: block; - margin-left: 0; - margin-right: 0; - line-height: 2; - justify-self: center; - color: var(--color-text-pri); - border-radius: 1em; - &:hover { - background-color: var(--color-text-acc); - } - } + &.root { + font-size: 1.25em; + display: block; + margin-left: 0; + margin-right: 0; + line-height: 2; + justify-self: center; + color: var(--color-text-pri); + border-radius: 1em; + &:hover { + background-color: var(--color-text-acc); + } + } } -a{ +a { color: var(--color-text-pri); text-decoration: none; } -a:hover #app-address{ +a:hover #app-address { text-decoration: underline; text-decoration-color: var(--color-border); } diff --git a/src/styles/TextInput.module.css b/src/styles/TextInput.module.css index 85dc414..a7596f5 100644 --- a/src/styles/TextInput.module.css +++ b/src/styles/TextInput.module.css @@ -1,4 +1,4 @@ -.default{ +.default { &.root { .wrapper { display: flex; @@ -10,7 +10,7 @@ color: var(--color-text-pri); font-size: 18px; } - .section{ + .section { color: var(--color-border); width: auto; padding-left: .5rem; @@ -20,7 +20,7 @@ } } -.search{ +.search { &.root { .wrapper { display: flex; @@ -38,8 +38,12 @@ padding-left: 1em; padding-right: 1em; text-align: center; - &[data-active="true"]{ - background-color: color-mix(in srgb,var(--color-search-background), transparent 50%); + &[data-active="true"] { + background-color: color-mix( + in srgb, + var(--color-search-background), + transparent 50% + ); border-color: var(--color-border); outline: none; color: var(--color-text-pri); @@ -47,14 +51,14 @@ font-weight: 500; font-size: 1.2em; letter-spacing: .2em; - width:100%; + width: 100%; border-top-left-radius: .25em; border-top-right-radius: .25em; border-bottom-left-radius: .25em; border-bottom-right-radius: .25em; } } - .section{ + .section { transition: opacity 0.1s 0s ease; color: var(--color-border); width: auto; @@ -72,12 +76,12 @@ font-weight: 500; font-size: 1.2em; letter-spacing: .2em; - width:100%; + width: 100%; border-top-left-radius: .25em; border-top-right-radius: .25em; border-bottom-left-radius: .25em; border-bottom-right-radius: .25em; - &[data-active="true"]{ + &[data-active="true"] { background-color: var(--color-search-background); border-color: var(--color-border); outline: none; @@ -86,14 +90,14 @@ font-weight: 500; font-size: 1.2em; letter-spacing: .2em; - width:100%; + width: 100%; border-top-left-radius: .25em; border-top-right-radius: .25em; border-bottom-left-radius: .25em; border-bottom-right-radius: .25em; } } - .section{ + .section { transition: opacity 0.4s 0.4s ease; color: var(--color-border); width: auto; diff --git a/src/types/index.ts b/src/types/index.ts index ff37dd2..6f6c067 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1 +1 @@ -export { type CurrentWeather, type OutlookWeather } from './weather'; +export type { CurrentWeather, OutlookWeather } from './weather';