diff --git a/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss b/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss index a3f84546d..40bfa93c6 100644 --- a/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss +++ b/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss @@ -4,9 +4,9 @@ background-color: var(--theme-background-primary); color: var(--theme-color-components-chat-text); padding: 10px; - font-size: var(--chat-message-text-size); + font-size: var(--chat-message-text-size); - @include flexCenter; + @include flex-center; .icon { margin-right: 10px; diff --git a/web/package.json b/web/package.json index 0f4a3908a..c3f4ce013 100644 --- a/web/package.json +++ b/web/package.json @@ -9,12 +9,13 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "eslint --fix --ext .js,.ts,.tsx types/ pages/ components/ stories/", - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build", - "build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -", - "test": "jest", - "format": "prettier --write **/*.{js,ts,jsx,tsx,css,md}" + "lint": "eslint --fix --ext .js,.ts,.tsx types/ pages/ components/ stories/ && npm run stylelint", + "stylelint": "stylelint **/*.scss", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build", + "build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -", + "test": "jest", + "format": "prettier --write **/*.{js,ts,jsx,tsx,css,md,scss}" }, "dependencies": { "@ant-design/icons": "4.8.3", diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index fcae9685a..2f1305d6c 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -46,17 +46,6 @@ BUTTONS border-radius: var(--theme-rounded-corners); border-color: var(--theme-color-components-primary-button-border); - &:hover, - &:focus { - border-color: var(--theme-color-action-hover); - color: var(--theme-color-action-hover); - background-color: var(--theme-color-components-secondary-button-background); - } - - &:focus { - border-color: var(--theme-color-components-secondary-button-text); - } - &[ant-click-animating-without-extra-node]::after { animation: 0s !important; } diff --git a/web/styles/globals.scss b/web/styles/globals.scss index b2657bdf9..bdfdab30f 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -18,18 +18,18 @@ --chat-notification-icon-padding: 6px; --chat-message-padding: 10px; --chat-text-highlight-border-radius: 3px; - --player-container-height: 75vh; - --status-bar-height: 2rem; - --footer-padding-x: 1rem; + --player-container-height: 75vh; + --status-bar-height: 2rem; + --footer-padding-x: 1rem; @include screen(tablet) { --header-height: 3.85rem; - --player-container-height: 400px; + --player-container-height: 400px; } - @include screen(mobile) { - --player-container-height: 250px; - } + @include screen(mobile) { + --player-container-height: 250px; + } } ::selection { diff --git a/web/styles/mixins.scss b/web/styles/mixins.scss index 4f037ef6c..38e847d8e 100644 --- a/web/styles/mixins.scss +++ b/web/styles/mixins.scss @@ -1,11 +1,11 @@ -@mixin flexCenter { +@mixin flex-center { display: flex; justify-content: center; align-items: center; } -@mixin screen($breakpoint) { - @if $breakpoint == desktop { +@mixin screen($breakpoint) { + @if $breakpoint == desktop { @media only screen and (width >= 768px) { @content; }