chore(client): styling adjustments

Jozwiaczek · Sep 2, 2021 · 61d97cc · 61d97cc
1 parent 0f4e150
commit 61d97cc
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/packages/client/src/elements/AppBar/AppBar.styled.ts b/packages/client/src/elements/AppBar/AppBar.styled.ts
@@ -58,7 +58,7 @@ export const AppBarPageWrapper = styled.div(
       padding: 40px 20px;
     }
     ${down(breakpoints.xs)} {
-      padding: 40px 14px;
+      padding: 40px 16px;
     }
   `,
 );
diff --git a/packages/client/src/elements/buttons/BackButton/BackButton.styled.ts b/packages/client/src/elements/buttons/BackButton/BackButton.styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import BackArrowIcon from '../../../icons/BackArrowIcon';
 import TextButton from '../TextButton';
@@ -8,9 +8,16 @@ export const BackIcon = styled(BackArrowIcon)`
 `;
 
 export const StyledTextButton = styled(TextButton)`
-  ${({ theme: { breakpoints, down } }) => `
-      ${down(breakpoints.md)} {
-        padding: 0;
+  ${({ theme: { breakpoints, down } }) => css`
+    ${down(breakpoints.md)} {
+      padding-left: 0;
+      padding-bottom: 0;
+
+      :focus-visible,
+      :hover,
+      :active {
+        background: none;
       }
+    }
   `};
 `;
diff --git a/packages/client/src/elements/inputs/SelectCard/SelectCard.styled.ts b/packages/client/src/elements/inputs/SelectCard/SelectCard.styled.ts
@@ -5,7 +5,7 @@ import Card from '../../Card';
 const CARD_ITEM_PADDING = '20px';
 
 export const CardItemButton = styled.button(
-  ({ theme: { palette } }) => css`
+  ({ theme: { palette, breakpoints, up } }) => css`
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -16,13 +16,15 @@ export const CardItemButton = styled.button(
     outline: none;
     position: relative;
 
-    :hover {
-      cursor: pointer;
-      background: ${palette.background.paperHover};
-    }
+    ${up(breakpoints.sm)} {
+      :hover {
+        cursor: pointer;
+        background: ${palette.background.paperHover};
+      }
 
-    :focus-visible {
-      box-shadow: inset 0 0 0 2px ${palette.primary.light};
+      :focus-visible {
+        box-shadow: inset 0 0 0 2px ${palette.primary.light};
+      }
     }
   `,
 );

diff --git a/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.styled.ts b/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.styled.ts
@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components';
 
 import { HistoryEvent } from '../../../enums/historyEvent.enum';
 import { OpenLockIcon, PowerSupplyIcon } from '../../../icons';
-import { StyledHelperFunc } from '../../../interfaces/utils.types';
 import Card from '../../Card';
 import { RECORD_ICON_CIRCLE_SIZE } from './HistoryCompactList.constants';
 import { RecordIconCircleProps } from './HistoryCompactList.types';
@@ -33,7 +32,7 @@ export const RecordRow = styled.div`
 
 export const RecordIconCircle = styled.div<RecordIconCircleProps>(
   ({ theme: { down, breakpoints }, firstRecord, event }) => css`
-    ${getRecordIconCircleColors}
+    ${getRecordIconCircleColors};
     border-radius: 100%;
     width: ${RECORD_ICON_CIRCLE_SIZE};
     height: ${RECORD_ICON_CIRCLE_SIZE};

diff --git a/packages/client/src/pages/authorized/Admin/Admin.styled.ts b/packages/client/src/pages/authorized/Admin/Admin.styled.ts
@@ -31,13 +31,18 @@ export const CardButton = styled(Button)(
     align-items: center;
     text-align: center;
     flex-direction: column;
+    column-gap: 10px;
+
     ${down(breakpoints.md)} {
       width: 100%;
       height: 75px;
       flex-direction: row;
       text-align: left;
       justify-content: flex-start;
       padding-left: 20px;
+      svg {
+        transform: none;
+      }
     }
   `,
 );

diff --git a/packages/client/src/pages/authorized/History/History.styled.ts b/packages/client/src/pages/authorized/History/History.styled.ts
@@ -13,5 +13,5 @@ export const DesktopListContainer = styled.div`
 `;
 
 export const MobileListContainer = styled.div`
-  margin-top: 40px;
+  padding: 40px 0;
 `;