Repository: inovex/scrumlr.io
Pull request #1901 (2022-06-28 09:04:14)

hover states
## Description

Added missing hover states to (hopefully) all interactive elements.

## Changelog

- added hover states for interactive elements that didn't have hover states before
- using the standard toggle component in the settings dialog now for consistent design

## Checklist

- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] The light- and dark-theme are both supported and tested
- [x] The design was implemented and is responsive for all devices and screen sizes
- [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)



Patch:
diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss
index 34633c00..a8bbbd59 100644
--- a/src/components/Board/Board.scss
+++ b/src/components/Board/Board.scss
@@ -85,6 +85,8 @@ $board__navigation-button-icon-dimension: 24px;
   padding: 0;
 
   z-index: $board__navigation-button-z-index;
+
+  cursor: pointer;
 }
 
 .board__navigation:focus {
diff --git a/src/components/BoardHeader/BoardHeader.scss b/src/components/BoardHeader/BoardHeader.scss
index 79b1803b..985570b1 100644
--- a/src/components/BoardHeader/BoardHeader.scss
+++ b/src/components/BoardHeader/BoardHeader.scss
@@ -79,7 +79,7 @@ $board-header__hover-padding: $board-header__hover-padding-top-bottom $padding--
   }
 
   &:hover {
-    transform: scale(1.16);
+    transform: scale(1.1);
   }
 
   &:active {
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
index 3998618c..fd138717 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
@@ -24,6 +24,10 @@ $header-menu-toggle-background-color: #c8c8c8;
   height: $header-menu-button-height;
   position: relative;
   display: inline-block;
+
+  &:hover::after {
+    transform: scale(1.2);
+  }
 }
 .board-option-toggle__switch::after {
   content: "";
@@ -32,7 +36,7 @@ $header-menu-toggle-background-color: #c8c8c8;
   position: absolute;
   border-radius: 100%;
   top: calc(50% - #{$header-menu-toggle-button-height} / 2);
-  transition: all 0.25s linear;
+  transition: all 0.16s ease-out, transform 0.08s ease-out;
 }
 .board-option-toggle__switch::before {
   content: "";
diff --git a/src/components/BoardHeader/ParticipantsList/Participant.scss b/src/components/BoardHeader/ParticipantsList/Participant.scss
index fde8d3ea..78b08250 100644
--- a/src/components/BoardHeader/ParticipantsList/Participant.scss
+++ b/src/components/BoardHeader/ParticipantsList/Participant.scss
@@ -11,6 +11,11 @@
 
   align-items: center;
   justify-content: space-between;
+
+  &:hover,
+  &:focus {
+    background-color: $color-white-two;
+  }
 }
 
 .participant:not(:last-child)::after {
diff --git a/src/components/BoardHeader/ParticipantsList/ParticipantsList.scss b/src/components/BoardHeader/ParticipantsList/ParticipantsList.scss
index b2ce6415..0a731066 100644
--- a/src/components/BoardHeader/ParticipantsList/ParticipantsList.scss
+++ b/src/components/BoardHeader/ParticipantsList/ParticipantsList.scss
@@ -1,8 +1,5 @@
 @import "constants/style.scss";
 
-$header-bottom_distance: 16px;
-$header-left_distance: 24px;
-
 .participants {
   position: absolute;
   top: 92px;
@@ -24,17 +21,20 @@ $header-left_distance: 24px;
   height: 86px;
   position: relative;
   background-color: var(--accent-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: $padding--default $padding--medium;
 }
 
 .participants__header-text {
+  position: relative;
   margin: 0;
   font-weight: bold;
   font-size: $text-size--large;
   line-height: $line-height--medium;
   letter-spacing: $letter-spacing--small;
-  position: absolute;
-  top: 24px;
-  left: $header-left_distance;
+  width: fit-content;
 }
 
 .participants__header-number {
@@ -48,36 +48,44 @@ $header-left_distance: 24px;
   right: -12px;
 }
 
+.participants__header-search {
+  position: relative;
+  display: flex;
+}
+
 .participants__header-input {
   background-color: transparent;
   color: $color-white;
+  caret-color: $color-white;
   font-size: $text-size--medium;
   letter-spacing: $letter-spacing--small;
   border: none;
   border-bottom: 1px solid transparent;
-  position: absolute;
-  bottom: $header-bottom_distance;
-  left: $header-left_distance;
   padding-left: 24px;
   opacity: 0.8;
+  transition: all 0.08s ease-out;
+  outline: none;
 
   &::placeholder {
     opacity: 1;
     color: $color-white;
   }
-}
 
-.participants__header > input:focus {
-  outline: none;
-  border-bottom: 1px solid $color-white;
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus {
+    opacity: 1;
+    outline: none;
+    border-bottom: 1px solid $color-white;
+  }
 }
 
-.header__icon {
+.participants__search_icon {
+  position: absolute;
   width: 20px;
   height: 20px;
-  position: absolute;
-  bottom: $header-bottom_distance;
-  left: $header-left_distance;
 }
 
 .participants__list {
diff --git a/src/components/BoardHeader/ParticipantsList/ParticipantsList.tsx b/src/components/BoardHeader/ParticipantsList/ParticipantsList.tsx
index ef8becc1..3eb440bb 100644
--- a/src/components/BoardHeader/ParticipantsList/ParticipantsList.tsx
+++ b/src/components/BoardHeader/ParticipantsList/ParticipantsList.tsx
@@ -42,8 +42,14 @@ export const ParticipantsList: VFC<ParticipantsListProps> = (props) => {
               <span className="participants__header-number">{them.length + 1}</span>
             </h4>
           </div>
-          <SearchIcon className="header__icon" />
-          <input className="participants__header-input" placeholder={t("ParticipantsList.search")} onChange={(event) => setSearchString(event.target.value.trim().toLowerCase())} />
+          <div className="participants__header-search">
+            <SearchIcon className="participants__search_icon" />
+            <input
+              className="participants__header-input"
+              placeholder={t("ParticipantsList.search")}
+              onChange={(event) => setSearchString(event.target.value.trim().toLowerCase())}
+            />
+          </div>
         </div>
         <ul className="participants__list">
           <div className="list__header">
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 754946e4..a247013d 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -19,7 +19,7 @@
   height: 48px;
   padding: $padding--small $padding--default;
 
-  transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  transition: all 0.08s ease-out;
   box-shadow: 0 0 0 0 rgba($color-backlog-blue, 0.2);
 }
 
@@ -81,19 +81,31 @@
 }
 
 .button:not(:disabled):not(.button--text-link):hover {
-  box-shadow: 0 2px 12px 6px rgba($color-backlog-blue, 0.3);
+  filter: brightness(1.05);
+  transform: scale(1.05);
+  box-shadow: 0 6px 9px 0 rgba($color-backlog-blue, 0.24);
 }
 
 .button:not(:disabled):not(.button--text-link).button--primary:hover {
-  box-shadow: 0 2px 12px 6px rgba($color-planning-pink, 0.3);
+  filter: brightness(1.05);
+  transform: scale(1.05);
+  box-shadow: 0 6px 9px 0 rgba($color-planning-pink, 0.24);
+}
+
+.button:not(:disabled):not(.button--text-link):active {
+  transform: scale(1);
+}
+
+.button:not(:disabled):not(.button--text-link).button--primary:active {
+  transform: scale(1);
 }
 
 .button:not(:disabled):not(.button--text-link):focus {
-  box-shadow: 0 2px 16px 8px rgba($color-backlog-blue, 0.4);
+  box-shadow: 0 6px 9px 0 rgba($color-backlog-blue, 0.4);
 }
 
 .button:not(:disabled):not(.button--text-link).button--primary:focus {
-  box-shadow: 0 2px 16px 8px rgba($color-planning-pink, 0.4);
+  box-shadow: 0 6px 9px 0 rgba($color-planning-pink, 0.4);
 }
 
 .button__label {
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 602c16bb..371670d8 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -200,6 +200,7 @@
   margin: 0 $margin--small 0 0;
   color: $color-middle-gray;
   cursor: pointer;
+  transition: all 0.08s ease-out;
 }
 
 .column__header-hidden-icon:hover {
@@ -220,15 +221,13 @@
   cursor: pointer;
   outline: none;
   padding: 0;
-  border-radius: 4px;
+  transition: all 0.08s ease-out;
 
   &:hover,
-  &:focus {
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-
-    > svg {
-      color: var(--accent-color);
-    }
+  &:focus > svg {
+    transform: translate(-0.64px, -0.64px);
+    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color-rgb), 0.24));
+    color: var(--accent-color);
   }
 }
 
@@ -239,6 +238,7 @@
 .column__header-edit-button-icon {
   color: $color-black;
   height: 24px;
+  transition: all 0.08s ease-out;
 }
 
 [theme="dark"] .column__header-edit-button-icon {
diff --git a/src/components/Column/ColumnSettings.scss b/src/components/Column/ColumnSettings.scss
index 767d43fd..c58a2f21 100644
--- a/src/components/Column/ColumnSettings.scss
+++ b/src/components/Column/ColumnSettings.scss
@@ -60,6 +60,11 @@
   width: 18px;
   border-radius: 4px;
   background-color: var(--accent-color);
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 // Hacky way to not show delete column button if it's the last column
diff --git a/src/components/Column/ColumnSettings.tsx b/src/components/Column/ColumnSettings.tsx
index 9f0fe2a3..e76d12db 100644
--- a/src/components/Column/ColumnSettings.tsx
+++ b/src/components/Column/ColumnSettings.tsx
@@ -12,6 +12,7 @@ import {useDispatch} from "react-redux";
 import "./ColumnSettings.scss";
 import {useAppSelector} from "store";
 import i18n from "i18next";
+import classNames from "classnames";
 import {Toast} from "../../utils/Toast";
 import {TEMPORARY_COLUMN_ID} from "../../constants/misc";
 
@@ -124,49 +125,49 @@ export const ColumnSettings: VFC<ColumnSettingsProps> = ({tabIndex, id, name, co
             tabIndex={tabIndex + 5}
             aria-label="Backlog Blue"
             title="Backlog Blue"
-            className={getColorClassName("backlog-blue")}
+            className={classNames(getColorClassName("backlog-blue"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "backlog-blue", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 6}
             aria-label="Grooming Green"
             title="Grooming Green"
-            className={getColorClassName("grooming-green")}
+            className={classNames(getColorClassName("grooming-green"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "grooming-green", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 7}
             aria-label="Lean Lilac"
             title="Lean Lilac"
-            className={getColorClassName("lean-lilac")}
+            className={classNames(getColorClassName("lean-lilac"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "lean-lilac", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 8}
             aria-label="Online Orange"
             title="Online Orange"
-            className={getColorClassName("online-orange")}
+            className={classNames(getColorClassName("online-orange"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "online-orange", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 9}
             aria-label="Planning Pink"
             title="Planning Pink"
-            className={getColorClassName("planning-pink")}
+            className={classNames(getColorClassName("planning-pink"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "planning-pink", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 10}
             aria-label="Poker Purple"
             title="Poker Purple"
-            className={getColorClassName("poker-purple")}
+            className={classNames(getColorClassName("poker-purple"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "poker-purple", index, visible}))}
           />
           <button
             tabIndex={tabIndex + 11}
             aria-label="Retro Red"
             title="Retro Red"
-            className={getColorClassName("retro-red")}
+            className={classNames(getColorClassName("retro-red"), "column__color-button")}
             onClick={() => dispatch(Actions.editColumn(id, {name, color: "retro-red", index, visible}))}
           />
         </li>
diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss
index 78b0ca10..99278672 100644
--- a/src/components/Dialog/Dialog.scss
+++ b/src/components/Dialog/Dialog.scss
@@ -76,19 +76,27 @@
   width: 100%;
   background: $color-white;
   cursor: pointer;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    background-color: rgba(var(--accent-color-rgb), 0.1);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  > label:first-of-type {
+    font-size: $text-size--medium;
+    color: $color-black;
+    letter-spacing: $letter-spacing--medium;
+    position: absolute;
+    left: 24px;
+    top: 16px;
+    cursor: pointer;
+  }
 }
-.dialog__button:focus {
-  outline: none;
-}
-.dialog__button > label:first-of-type {
-  font-size: $text-size--medium;
-  color: $color-black;
-  letter-spacing: $letter-spacing--medium;
-  position: absolute;
-  left: 24px;
-  top: 16px;
-  cursor: pointer;
-}
+
 [theme="dark"] {
   .dialog__button {
     background-color: $color-dark-mode-note;
diff --git a/src/components/MenuBars/MenuBars.scss b/src/components/MenuBars/MenuBars.scss
index 6c1cfccd..6cc7b4c7 100644
--- a/src/components/MenuBars/MenuBars.scss
+++ b/src/components/MenuBars/MenuBars.scss
@@ -5,6 +5,10 @@
   z-index: $menu-z-index;
 }
 
+.menu-bars__switch:hover {
+  filter: brightness(1.4);
+}
+
 [theme="light"] {
   .menu-bars--admin {
     .menu-bars__switch {
@@ -93,7 +97,7 @@
     padding: 0;
     border: 0;
     border-radius: 100%;
-    transition: background-color 0.25s ease-in-out;
+    transition: background-color 0.25s ease-in-out, filter 0.08s ease-out;
     margin-left: 214px;
     position: relative;
     cursor: pointer;
diff --git a/src/components/MenuBars/MenuItem/MenuItem.scss b/src/components/MenuBars/MenuItem/MenuItem.scss
index efb07d31..4ecf869c 100644
--- a/src/components/MenuBars/MenuItem/MenuItem.scss
+++ b/src/components/MenuBars/MenuItem/MenuItem.scss
@@ -73,6 +73,7 @@ $number-of-menu-items: 4;
   border-radius: 100%;
   color: var(--primaryColor);
   background: $color-white;
+  transition: all 0.12s ease-out;
 }
 [theme="dark"] {
   .menu-item__icon {
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index 6e42362d..c8f8a2ba 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -12,7 +12,7 @@ $note-input__input-right: 40px;
   margin-bottom: $margin--default;
   background-color: $color-light-gray;
   border-radius: 20px;
-  transition: box-shadow 0.2s ease-in-out;
+  transition: all 0.12s ease-in-out;
 }
 
 .note-input__input {
@@ -38,7 +38,7 @@ $note-input__input-right: 40px;
 
 .note-input:hover,
 .note-input:focus-within {
-  box-shadow: 0 6px 9px 0 rgba(0, 87, 255, 0.16);
+  box-shadow: 0 6px 9px 0 rgba(var(--accent-color-rgb), 0.16);
 }
 [theme="dark"] {
   .note-input {
@@ -60,4 +60,10 @@ $note-input__input-right: 40px;
   color: var(--accent-color);
   align-self: center;
   cursor: pointer;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.2);
+    transform: scale(1.2);
+  }
 }
diff --git a/src/components/Request/Request.scss b/src/components/Request/Request.scss
index 9801812c..1f2c8540 100644
--- a/src/components/Request/Request.scss
+++ b/src/components/Request/Request.scss
@@ -45,6 +45,12 @@
   background-color: transparent;
   color: $color-backlog-blue;
   cursor: pointer;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.06);
+  }
 }
 
 .request__button + .request__button {
diff --git a/src/components/SettingsDialog/BoardSettings/BoardSettings.scss b/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
index 84767697..eafe00ce 100644
--- a/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
+++ b/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
@@ -157,6 +157,16 @@
 .board-settings__show-password-button--enabled {
   color: var(--accent-color);
   cursor: pointer;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
 
 .board-settings__show-password-button--disabled {
@@ -201,6 +211,12 @@
   color: var(--accent-color);
   cursor: pointer;
   align-self: center;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.01);
+  }
 }
 
 .board-settings__remove-protection-button svg {
diff --git a/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx b/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
index 28d3c269..374658ab 100644
--- a/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
+++ b/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
@@ -11,12 +11,12 @@ import {ReactComponent as RefreshIcon} from "assets/icon-refresh.svg";
 import {DEFAULT_BOARD_NAME, MIN_PASSWORD_LENGTH, PLACEHOLDER_PASSWORD} from "constants/misc";
 import {Toast} from "utils/Toast";
 import {generateRandomString} from "utils/random";
+import {Toggle} from "components/Toggle";
 import {ConfirmationDialog} from "components/ConfirmationDialog";
 import {SettingsButton} from "../Components/SettingsButton";
-import {SettingsToggle} from "../Components/SettingsToggle";
+import {SettingsInput} from "../Components/SettingsInput";
 import "./BoardSettings.scss";
 import "../SettingsDialog.scss";
-import {SettingsInput} from "../Components/SettingsInput";
 
 export const BoardSettings = () => {
   const {t} = useTranslation();
@@ -180,7 +180,7 @@ export const BoardSettings = () => {
                     store.dispatch(Actions.editBoard({showAuthors: !state.board.showAuthors}));
                   }}
                 >
-                  <SettingsToggle active={state.board.showAuthors} />
+                  <Toggle active={state.board.showAuthors} />
                 </SettingsButton>
                 <hr className="settings-dialog__separator" />
                 <SettingsButton
@@ -189,7 +189,7 @@ export const BoardSettings = () => {
                   label={t("BoardSettings.ShowOtherUsersNotesOption")}
                   onClick={() => store.dispatch(Actions.editBoard({showNotesOfOtherUsers: !state.board.showNotesOfOtherUsers}))}
                 >
-                  <SettingsToggle active={state.board.showNotesOfOtherUsers} />
+                  <Toggle active={state.board.showNotesOfOtherUsers} />
                 </SettingsButton>
                 <hr className="settings-dialog__separator" />
                 <SettingsButton
@@ -198,7 +198,7 @@ export const BoardSettings = () => {
                   label={t("BoardSettings.ShowHiddenColumnsOption")}
                   onClick={() => store.dispatch(Actions.setShowHiddenColumns(!state.me?.showHiddenColumns))}
                 >
-                  <SettingsToggle active={state.me?.showHiddenColumns} />
+                  <Toggle active={state.me?.showHiddenColumns ?? false} />
                 </SettingsButton>
               </div>
 
diff --git a/src/components/SettingsDialog/Components/AvatarSettings.scss b/src/components/SettingsDialog/Components/AvatarSettings.scss
index 3e130adf..3dd8641d 100644
--- a/src/components/SettingsDialog/Components/AvatarSettings.scss
+++ b/src/components/SettingsDialog/Components/AvatarSettings.scss
@@ -24,19 +24,19 @@
       border: 0;
       border-radius: 20px;
       background-color: $color-white;
-      box-shadow: 0 16px 32px rgba(var(--accent-color-rgb), 0.3);
+      box-shadow: 0 8px 16px rgba(var(--accent-color-rgb), 0.3);
       align-items: center;
       justify-content: center;
+      transition: all 0.08s ease-out;
 
-      &:hover:after {
-        content: "";
-        width: 100%;
-        height: 100%;
-        background: rgba(var(--accent-color-rgb), 0.1);
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 20px;
+      &:hover {
+        background-color: mix($color-white, $color-lean-lilac, 92%);
+        transform: scale(1.06);
+        box-shadow: 0 12px 20px rgba(var(--accent-color-rgb), 0.2);
+      }
+
+      &:active {
+        transform: scale(1);
       }
 
       > svg {
diff --git a/src/components/SettingsDialog/Components/SettingsAccordion.scss b/src/components/SettingsDialog/Components/SettingsAccordion.scss
index 4c8ce395..70f8c900 100644
--- a/src/components/SettingsDialog/Components/SettingsAccordion.scss
+++ b/src/components/SettingsDialog/Components/SettingsAccordion.scss
@@ -13,12 +13,17 @@
     border: none;
     justify-content: space-between;
     align-items: center;
+
+    &:hover > .accordion-item__header-icon {
+      filter: brightness(1.4);
+    }
   }
 
   &__header-icon {
     height: 24px;
     color: var(--accent-color);
     transform: rotate(90deg);
+    transition: transform 0.2s ease-out;
 
     &--open {
       transform: rotate(-90deg);
diff --git a/src/components/SettingsDialog/Components/SettingsCarousel.scss b/src/components/SettingsDialog/Components/SettingsCarousel.scss
index 53807e1b..f8f91ac6 100644
--- a/src/components/SettingsDialog/Components/SettingsCarousel.scss
+++ b/src/components/SettingsDialog/Components/SettingsCarousel.scss
@@ -30,6 +30,12 @@
     align-items: center;
     border: none;
     color: var(--accent-color);
+    transition: all 0.08s ease-out;
+
+    &:hover {
+      filter: brightness(1.4);
+      transform: scale(1.1);
+    }
 
     svg {
       width: 24px;
diff --git a/src/components/SettingsDialog/Components/SettingsInput.scss b/src/components/SettingsDialog/Components/SettingsInput.scss
index b0f6a82e..7942bf69 100644
--- a/src/components/SettingsDialog/Components/SettingsInput.scss
+++ b/src/components/SettingsDialog/Components/SettingsInput.scss
@@ -5,7 +5,7 @@
   display: flex;
 
   input {
-    height: 100%;
+    height: 48px;
     width: 100%;
     border-radius: 8px;
     background-color: $color-white;
diff --git a/src/components/SettingsDialog/Participants/Participants.tsx b/src/components/SettingsDialog/Participants/Participants.tsx
index 701d4659..88b1359e 100644
--- a/src/components/SettingsDialog/Participants/Participants.tsx
+++ b/src/components/SettingsDialog/Participants/Participants.tsx
@@ -1,10 +1,10 @@
 import classNames from "classnames";
 import store, {useAppSelector} from "store";
 import {Actions} from "store/action";
+import {Toggle} from "components/Toggle";
 import {Avatar} from "components/Avatar";
 import {useTranslation} from "react-i18next";
 import {SettingsButton} from "../Components/SettingsButton";
-import {SettingsToggle} from "../Components/SettingsToggle";
 import "./Participants.scss";
 import "../SettingsDialog.scss";
 
@@ -33,7 +33,7 @@ export const Participants = () => {
                 </span>
                 <div className={state.me.connected ? "participants__online-mark" : "participants__offline-mark"} />
               </div>
-              {(state.me.role === "MODERATOR" || state.me.role === "OWNER") && <SettingsToggle active={state.me.role === "MODERATOR" || state.me.role === "OWNER"} />}
+              {(state.me.role === "MODERATOR" || state.me.role === "OWNER") && <Toggle active={state.me.role === "MODERATOR" || state.me.role === "OWNER"} disabled />}
             </SettingsButton>
             {state.others.length > 0 && <hr className="settings-dialog__separator" />}
             {state.others.length > 0 &&
@@ -51,7 +51,9 @@ export const Participants = () => {
                       </span>
                       <div className={participant.connected ? "participants__online-mark" : "participants__offline-mark"} />
                     </div>
-                    {(state.me.role === "MODERATOR" || state.me.role === "OWNER") && <SettingsToggle active={participant.role === "MODERATOR" || participant.role === "OWNER"} />}
+                    {(state.me.role === "MODERATOR" || state.me.role === "OWNER") && (
+                      <Toggle active={participant.role === "MODERATOR" || participant.role === "OWNER"} disabled={participant.role === "OWNER"} />
+                    )}
                   </SettingsButton>
                   {state.others[index + 1] && <hr className="settings-dialog__separator" />}
                 </>
diff --git a/src/components/SettingsDialog/SettingsDialog.scss b/src/components/SettingsDialog/SettingsDialog.scss
index a7234924..d286f223 100644
--- a/src/components/SettingsDialog/SettingsDialog.scss
+++ b/src/components/SettingsDialog/SettingsDialog.scss
@@ -119,9 +119,25 @@ $settings-dialog-container--bottom: 62px;
   width: 44px;
   height: 44px;
   border-radius: 22px;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    background-color: $color-backlog-blue;
+    color: $color-white;
+    transform: scale(1.04);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
 [theme="dark"] .settings-dialog__close-button {
   color: $color-planning-pink;
+
+  &:hover {
+    background-color: $color-planning-pink;
+    color: $color-white;
+  }
 }
 @media screen and (min-width: 450px) {
   .settings-dialog__close-button {
diff --git a/src/components/SettingsDialog/ShareSession/ShareSession.scss b/src/components/SettingsDialog/ShareSession/ShareSession.scss
index 193b278f..731f411f 100644
--- a/src/components/SettingsDialog/ShareSession/ShareSession.scss
+++ b/src/components/SettingsDialog/ShareSession/ShareSession.scss
@@ -29,24 +29,34 @@ $header-menu-border-bottom-color: #efefef;
   padding: $padding--small $padding--medium;
   margin-top: $margin--large;
   width: 260px;
-  border: none;
+  border: solid 2px var(--accent-color);
   border-radius: 32px;
   background-color: var(--accent-color);
   color: $color-white;
   font-weight: bold;
   cursor: pointer;
-  transition: all 0.1s ease-in-out;
-  &:active {
-    transform: scale(0.95);
-  }
+  transition: all 0.08s ease-out;
+
   &:hover {
-    background-color: rgba(var(--accent-color-rgb), 0.8);
+    filter: brightness(1.05);
+    transform: scale(1.02);
+    box-shadow: 0 6px 9px 0 rgba(var(--accent-color-rgb), 0.24);
+  }
+
+  &:active {
+    transform: scale(1);
   }
+
   &.--copied {
     background-color: transparent;
-    border: solid 2px var(--accent-color);
     color: var(--accent-color);
     cursor: default;
+
+    &:hover {
+      filter: none;
+      transform: none;
+      box-shadow: none;
+    }
   }
 }
 
diff --git a/src/components/Timer/Timer.scss b/src/components/Timer/Timer.scss
index c7021f2c..7f8c1948 100644
--- a/src/components/Timer/Timer.scss
+++ b/src/components/Timer/Timer.scss
@@ -44,10 +44,20 @@
   cursor: pointer;
   padding: 0;
   outline: none;
-}
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.1);
+  }
 
-.timer > button:focus {
-  transform: scale(1.1);
+  &:focus {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
 
 // Shake animation on expired timer
diff --git a/src/components/TimerDialog/TimerDialog.scss b/src/components/TimerDialog/TimerDialog.scss
index 30bf47dc..e18936fe 100644
--- a/src/components/TimerDialog/TimerDialog.scss
+++ b/src/components/TimerDialog/TimerDialog.scss
@@ -110,13 +110,26 @@
   position: absolute;
   top: 8px;
   padding: 0;
+  transition: all 0.08s ease-out;
+
+  &:first-of-type {
+    right: 80px;
+  }
+
+  &:last-of-type {
+    right: 24px;
+  }
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
-.timer-dialog__time-button:first-of-type {
-  right: 80px;
-}
-.timer-dialog__time-button:last-of-type {
-  right: 24px;
-}
+
 .timer-dialog__time-label {
   position: absolute;
   top: 8px;
diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss
index c8e6869b..62756cd0 100644
--- a/src/components/Toggle/Toggle.scss
+++ b/src/components/Toggle/Toggle.scss
@@ -4,6 +4,11 @@
   position: relative;
   width: 40px;
   height: 24px;
+
+  &:hover::after {
+    filter: brightness(1.1);
+    transform: scale(1.1);
+  }
 }
 
 .toggle::before {
@@ -23,7 +28,7 @@
   height: 24px;
   width: 24px;
   border-radius: 100%;
-  transition: all 0.2s linear;
+  transition: all 0.16s ease-out, transform 0.08s ease-out;
   top: 0;
 
   left: 0;
@@ -33,16 +38,16 @@
 .toggle--active::after {
   left: 16px;
   background-color: var(--accent-color);
-  box-shadow: 0 4px 8px #0057ff29;
+  box-shadow: 0 4px 8px rgba(var(--accent-color-rgb), 0.24);
 }
 
-[theme="dark"] {
-  .toggle--active::after {
-    box-shadow: 0 4px 8px #ff006929;
+.toggle.toggle--disabled {
+  &::after {
+    background-color: $color-middle-gray;
+    box-shadow: none;
+  }
+  &:hover::after {
+    filter: none;
+    transform: none;
   }
-}
-
-.toggle.toggle--disabled::after {
-  background-color: $color-middle-gray;
-  box-shadow: none;
 }
diff --git a/src/components/VotingDialog/VotingDialog.scss b/src/components/VotingDialog/VotingDialog.scss
index 3d5807b8..cd5b4ec2 100644
--- a/src/components/VotingDialog/VotingDialog.scss
+++ b/src/components/VotingDialog/VotingDialog.scss
@@ -106,6 +106,17 @@
   width: 80%;
   background: $color-planning-pink;
   cursor: pointer;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.05);
+    transform: scale(1.01);
+    box-shadow: 0 4px 8px 0 rgba(var(--accent-color-rgb), 0.24);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
 .voting-dialog__start-button > label {
   font-weight: bold;
@@ -131,13 +142,26 @@
   position: absolute;
   top: 8px;
   padding: 0;
+  transition: all 0.08s ease-out;
+
+  &:first-of-type {
+    right: 80px;
+  }
+
+  &:last-of-type {
+    right: 24px;
+  }
+
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
 }
-.voting-dialog__vote-button:first-of-type {
-  right: 80px;
-}
-.voting-dialog__vote-button:last-of-type {
-  right: 24px;
-}
+
 .voting-dialog__vote-label {
   position: absolute;
   top: 8px;
diff --git a/src/routes/Board/BoardGuard.scss b/src/routes/Board/BoardGuard.scss
index 437dbcae..4e335b47 100644
--- a/src/routes/Board/BoardGuard.scss
+++ b/src/routes/Board/BoardGuard.scss
@@ -6,9 +6,15 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+}
+
+.board-guard__denied-link {
+  color: $color-planning-pink;
+  transition: all 0.08s ease-out;
 
-  &__denied-link {
-    color: $color-planning-pink;
+  &:hover {
+    filter: brightness(1.4);
+    transform: scale(1.02);
   }
 }
 
diff --git a/src/routes/Legal/Legal.scss b/src/routes/Legal/Legal.scss
index 6eb948b3..31148ea4 100644
--- a/src/routes/Legal/Legal.scss
+++ b/src/routes/Legal/Legal.scss
@@ -9,6 +9,13 @@
 
 .legal a {
   color: $color-planning-pink;
+  font-weight: bold;
+  text-decoration: none;
+
+  &:hover {
+    filter: brightness(1.4);
+    text-decoration: underline;
+  }
 }
 
 .legal__text {
diff --git a/src/routes/LoginBoard/LoginBoard.scss b/src/routes/LoginBoard/LoginBoard.scss
index 3650afff..0fe53f80 100644
--- a/src/routes/LoginBoard/LoginBoard.scss
+++ b/src/routes/LoginBoard/LoginBoard.scss
@@ -15,6 +15,11 @@
 
 .login-board__logo {
   margin-bottom: 1.5em;
+  transition: all 0.16s ease-out;
+
+  &:hover {
+    filter: drop-shadow(4px 4px 4px $color-middle-gray);
+  }
 }
 
 .login-board__divider {
@@ -69,6 +74,12 @@
   color: $color-planning-pink;
   font-weight: bold;
   text-decoration: none;
+  transition: all 0.08s ease-out;
+
+  &:hover {
+    filter: brightness(1.4);
+    text-decoration: underline;
+  }
 }
 
 .login-board__terms-label {
@@ -93,15 +104,15 @@
   background: $color-white;
   cursor: pointer;
   border-radius: 100%;
-  transition: all 0.4s cubic-bezier(1, 0, 0.4, 1);
+  transition: all 0.16s ease-out;
 }
 
 .login-board__terms:hover .login-board__terms-label::before {
-  box-shadow: 0 0 0 4px rgba($color-white, 0.2);
+  box-shadow: 0 0 0 4px rgba($color-backlog-blue, 0.2);
 }
 
 .login-board__terms:focus .login-board__terms-label::before {
-  box-shadow: 0 0 0 4px rgba($color-white, 0.4);
+  box-shadow: 0 0 0 4px rgba($color-backlog-blue, 0.4);
 }
 
 // checkbox checkmark
@@ -144,6 +155,18 @@
     background: #1a2232;
   }
 
+  .login-board__logo:hover {
+    filter: drop-shadow(4px 4px 4px $color-black);
+  }
+
+  .login-board__terms:hover .login-board__terms-label::before {
+    box-shadow: 0 0 0 4px rgba($color-white, 0.2);
+  }
+
+  .login-board__terms:focus .login-board__terms-label::before {
+    box-shadow: 0 0 0 4px rgba($color-white, 0.4);
+  }
+
   @media #{$tablet} {
     .login-board__form-wrapper {
       background: $color-dark-two;


Test patch:
diff --git a/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap b/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
index 1ade4f97..1bc7fbe4 100644
--- a/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
+++ b/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
@@ -114,12 +114,8 @@ exports[`BoardSettings should match snapshot 1`] = `
             BoardSettings.ShowAuthorOption
           </span>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--right"
-            />
-          </div>
+            class="toggle toggle--active"
+          />
         </button>
         <hr
           class="settings-dialog__separator"
@@ -135,12 +131,8 @@ exports[`BoardSettings should match snapshot 1`] = `
             BoardSettings.ShowOtherUsersNotesOption
           </span>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--right"
-            />
-          </div>
+            class="toggle toggle--active"
+          />
         </button>
         <hr
           class="settings-dialog__separator"
@@ -156,12 +148,8 @@ exports[`BoardSettings should match snapshot 1`] = `
             BoardSettings.ShowHiddenColumnsOption
           </span>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--left"
-            />
-          </div>
+            class="toggle"
+          />
         </button>
       </div>
       <button
diff --git a/src/components/SettingsDialog/Participants/__tests__/__snapshots__/Participants.test.tsx.snap b/src/components/SettingsDialog/Participants/__tests__/__snapshots__/Participants.test.tsx.snap
index 7771c781..1cda2cf7 100644
--- a/src/components/SettingsDialog/Participants/__tests__/__snapshots__/Participants.test.tsx.snap
+++ b/src/components/SettingsDialog/Participants/__tests__/__snapshots__/Participants.test.tsx.snap
@@ -515,12 +515,8 @@ exports[`Participants should render filter and participants correctly 1`] = `
             />
           </div>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--right"
-            />
-          </div>
+            class="toggle toggle--active toggle--disabled"
+          />
         </button>
         <hr
           class="settings-dialog__separator"
@@ -964,12 +960,8 @@ exports[`Participants should render filter and participants correctly 1`] = `
             />
           </div>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--right"
-            />
-          </div>
+            class="toggle toggle--active"
+          />
         </button>
         <hr
           class="settings-dialog__separator"
@@ -1443,12 +1435,8 @@ exports[`Participants should render filter and participants correctly 1`] = `
             />
           </div>
           <div
-            class="settings-toggle"
-          >
-            <div
-              class="settings-toggle__switch settings-toggle__switch--left"
-            />
-          </div>
+            class="toggle"
+          />
         </button>
       </div>
     </div>