Add rule to order css in styled components alphabetically (#284)

* Add plugin

* Run plugin

front/.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort'],
+  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'better-styled-components'],
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
@@ -44,6 +44,7 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error'
+    'simple-import-sort/exports': 'error',
+    'better-styled-components/sort-declarations-alphabetically': 2
   },
 };

front/package-lock.json

@@ -71,6 +71,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-config-standard-with-typescript": "^23.0.0",
+        "eslint-plugin-better-styled-components": "^1.1.2",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-n": "^15.5.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -18267,6 +18268,60 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-better-styled-components": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-better-styled-components/-/eslint-plugin-better-styled-components-1.1.2.tgz",
+      "integrity": "sha512-pGLIv8Z05xnmMyDyLWV65KQs7HU+FN403Tqb5xv3BZvw5kjC3K18/aYm7mcRpLLPse5/lwhX8ieGQKflPgr0xQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "requireindex": "~1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-better-styled-components/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-better-styled-components/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/eslint-plugin-better-styled-components/node_modules/requireindex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
+      "integrity": "sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
+    "node_modules/eslint-plugin-better-styled-components/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/eslint-plugin-es": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz",

front/package.json

@@ -115,6 +115,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-prettier": "^4.2.1",

front/src/modules/auth/components/RequireAuth.tsx

@@ -6,11 +6,11 @@ import styled from '@emotion/styled';
 import { hasAccessToken } from '../services/AuthService';
 
 const EmptyContainer = styled.div`
-  display: flex;
-  justify-content: center;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 100%;
+  justify-content: center;
+  width: 100%;
 `;
 
 const fadeIn = keyframes`
@@ -23,8 +23,8 @@ const fadeIn = keyframes`
 `;
 
 const FadeInStyle = styled.div`
-  opacity: 0;
   animation: ${fadeIn} 1s forwards;
+  opacity: 0;
 `;
 
 export function RequireAuth({

front/src/modules/comments/components/comments/CellCommentChip.tsx

@@ -10,12 +10,12 @@ const StyledCellWrapper = styled.div`
 `;
 
 const StyledCommentChipContainer = styled.div`
-  position: relative;
-  right: 50px;
-  width: 50px;
-
   display: flex;
   justify-content: flex-end;
+  position: relative;
+
+  right: 50px;
+  width: 50px;
 `;
 
 export function CellCommentChip(props: CommentChipProps) {

front/src/modules/comments/components/comments/CommentChip.tsx

@@ -8,26 +8,26 @@ export type CommentChipProps = {
 };
 
 const StyledChip = styled.div`
-  height: 26px;
-  max-width: 42px;
-
-  padding-left: 4px;
-  padding-right: 4px;
-
-  display: flex;
   align-items: center;
-  justify-content: center;
+  backdrop-filter: blur(6px);
+
+  background: ${(props) => props.theme.primaryBackgroundTransparent};
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  color: ${(props) => props.theme.text30};
+  cursor: pointer;
+  display: flex;
   flex-direction: row;
   gap: 4px;
 
-  background: ${(props) => props.theme.primaryBackgroundTransparent};
-  backdrop-filter: blur(6px);
+  height: 26px;
+  justify-content: center;
 
-  border-radius: ${(props) => props.theme.borderRadius};
+  max-width: 42px;
 
-  cursor: pointer;
+  padding-left: 4px;
 
-  color: ${(props) => props.theme.text30};
+  padding-right: 4px;
 
   &:hover {
     background: ${(props) => props.theme.tertiaryBackground};
@@ -38,12 +38,12 @@ const StyledChip = styled.div`
 `;
 
 const StyledCount = styled.div`
-  display: flex;
   align-items: center;
-  justify-content: center;
-
+  display: flex;
   font-size: 12px;
+
   font-weight: 500;
+  justify-content: center;
 `;
 
 export function CommentChip({ count, onClick }: CommentChipProps) {

front/src/modules/comments/components/comments/CommentHeader.tsx

@@ -14,49 +14,49 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
 
   flex-direction: row;
 
+  gap: ${(props) => props.theme.spacing(1)};
+
   justify-content: flex-start;
 
   padding: ${(props) => props.theme.spacing(1)};
-
-  gap: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledName = styled.div`
+  color: ${(props) => props.theme.text80};
   font-size: 13px;
   font-weight: 400;
-  color: ${(props) => props.theme.text80};
+  max-width: 160px;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-  max-width: 160px;
 `;
 
 const StyledDate = styled.div`
+  color: ${(props) => props.theme.text30};
   font-size: 12px;
   font-weight: 400;
-  color: ${(props) => props.theme.text30};
-
-  padding-top: 1.5px;
 
   margin-left: ${(props) => props.theme.spacing(1)};
+
+  padding-top: 1.5px;
 `;
 
 const StyledTooltip = styled(Tooltip)`
-  padding: 8px;
-
-  opacity: 1;
-
   background-color: ${(props) => props.theme.primaryBackground};
 
+  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
+
+  box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12);
+
   color: ${(props) => props.theme.text100};
 
-  box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
+  opacity: 1;
+  padding: 8px;
 `;
 
 export function CommentHeader({ comment }: OwnProps) {

front/src/modules/comments/components/comments/CommentThread.tsx

@@ -17,29 +17,29 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: flex-start;
+  display: flex;
 
   flex-direction: column;
 
-  justify-content: flex-start;
-
   gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
   padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-
   align-items: flex-start;
-  justify-content: flex-start;
+  display: flex;
 
+  flex-direction: column-reverse;
+  gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
   max-height: 400px;
   overflow: auto;
-  width: 100%;
 
-  gap: ${(props) => props.theme.spacing(4)};
+  width: 100%;
 `;
 
 export function CommentThread({ commentThread }: OwnProps) {

front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx

@@ -19,28 +19,28 @@ import {
 import { CommentThreadItem } from './CommentThreadItem';
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: flex-start;
+  display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing(4)};
+
   justify-content: flex-start;
 
   max-height: calc(100% - 16px);
-
-  gap: ${(props) => props.theme.spacing(4)};
   padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-
   align-items: flex-start;
-  justify-content: flex-start;
-
-  overflow: auto;
-  width: 100%;
+  display: flex;
 
+  flex-direction: column-reverse;
   gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
+  overflow: auto;
+
+  width: 100%;
 `;
 
 export function CommentThreadCreateMode() {

front/src/modules/comments/components/comments/CommentThreadItem.tsx

@@ -9,23 +9,23 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
   gap: ${(props) => props.theme.spacing(1)};
+  justify-content: flex-start;
 `;
 
 const StyledCommentBody = styled.div`
+  color: ${(props) => props.theme.text60};
   font-size: ${(props) => props.theme.fontSizeMedium};
-  line-height: ${(props) => props.theme.lineHeight};
 
-  text-align: left;
+  line-height: ${(props) => props.theme.lineHeight};
+  overflow-wrap: anywhere;
+
   padding-left: 24px;
 
-  color: ${(props) => props.theme.text60};
-
-  overflow-wrap: anywhere;
+  text-align: left;
 `;
 
 export function CommentThreadItem({ comment }: OwnProps) {

front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx

@@ -15,19 +15,19 @@ export default meta;
 type Story = StoryObj<typeof CellCommentChip>;
 
 const TestCellContainer = styled.div`
-  display: flex;
   align-items: center;
-  justify-content: flex-start;
-
-  min-width: 250px;
-  max-width: 250px;
-
-  text-wrap: nowrap;
-  overflow: hidden;
+  background: ${(props) => props.theme.primaryBackground};
+  display: flex;
 
   height: fit-content;
+  justify-content: flex-start;
 
-  background: ${(props) => props.theme.primaryBackground};
+  max-width: 250px;
+  min-width: 250px;
+
+  overflow: hidden;
+
+  text-wrap: nowrap;
 `;
 
 const StyledFakeCellText = styled.div`

front/src/modules/companies/components/CompanyChip.tsx

@@ -7,13 +7,13 @@ export type CompanyChipPropsType = {
 };
 
 const StyledContainer = styled.span`
+  align-items: center;
   background-color: ${(props) => props.theme.tertiaryBackground};
   border-radius: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text80};
   display: inline-flex;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
   gap: ${(props) => props.theme.spacing(1)};
+  padding: ${(props) => props.theme.spacing(1)};
 
   :hover {
     filter: brightness(95%);
@@ -21,8 +21,8 @@ const StyledContainer = styled.span`
 
   img {
     height: 14px;
-    width: 14px;
     object-fit: cover;
+    width: 14px;
   }
 `;
 

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -16,8 +16,8 @@ type OwnProps = {
 };
 
 const StyledDiv = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
   width: 100%;
 `;

front/src/modules/people/components/PersonChip.tsx

@@ -9,29 +9,29 @@ export type PersonChipPropsType = {
 };
 
 const StyledContainer = styled.span`
+  align-items: center;
   background-color: ${(props) => props.theme.tertiaryBackground};
   border-radius: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text80};
   display: inline-flex;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
   gap: ${(props) => props.theme.spacing(1)};
+  height: 12px;
 
   overflow: hidden;
-  white-space: nowrap;
+  padding: ${(props) => props.theme.spacing(1)};
 
   :hover {
     filter: brightness(95%);
   }
 
   img {
-    height: 14px;
-    width: 14px;
     border-radius: 100%;
+    height: 14px;
     object-fit: cover;
+    width: 14px;
   }
 
-  height: 12px;
+  white-space: nowrap;
 `;
 
 export function PersonChip({ name, picture }: PersonChipPropsType) {

front/src/modules/pipelines/components/PipelineChip.tsx

@@ -8,13 +8,13 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.span`
+  align-items: center;
   background-color: ${(props) => props.theme.tertiaryBackground};
   border-radius: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text80};
   display: inline-flex;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
   gap: ${(props) => props.theme.spacing(1)};
+  padding: ${(props) => props.theme.spacing(1)};
 
   :hover {
     filter: brightness(95%);

front/src/modules/search/components/CommandMenuStyles.tsx

@@ -2,61 +2,61 @@ import styled from '@emotion/styled';
 import { Command } from 'cmdk';
 
 export const StyledDialog = styled(Command.Dialog)`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 640px;
-  padding: 25px;
-  width: 100%;
   background: ${(props) => props.theme.primaryBackground};
   border-radius: ${(props) => props.theme.borderRadius};
+  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
+  font-family: ${(props) => props.theme.fontFamily};
+  left: 50%;
+  max-width: 640px;
   overflow: hidden;
   padding: 0;
-  font-family: ${(props) => props.theme.fontFamily};
-  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
+  padding: 25px;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
 `;
 
 export const StyledInput = styled(Command.Input)`
-  border: none;
-  width: 100%;
-  font-size: ${(props) => props.theme.fontSizeLarge};
-  padding: ${(props) => props.theme.spacing(5)};
-  outline: none;
   background: ${(props) => props.theme.primaryBackground};
-  color: ${(props) => props.theme.text100};
+  border: none;
   border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 0;
   caret-color: ${(props) => props.theme.blue};
+  color: ${(props) => props.theme.text100};
+  font-size: ${(props) => props.theme.fontSizeLarge};
   margin: 0;
+  outline: none;
+  padding: ${(props) => props.theme.spacing(5)};
+  width: 100%;
 `;
 
 export const StyledItem = styled(Command.Item)`
-  cursor: pointer;
-  height: 48px;
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  display: flex;
   align-items: center;
-  gap: ${(props) => props.theme.spacing(3)};
-  padding: 0 ${(props) => props.theme.spacing(4)};
   color: ${(props) => props.theme.text100};
-  user-select: none;
+  cursor: pointer;
+  display: flex;
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  gap: ${(props) => props.theme.spacing(3)};
+  height: 48px;
+  padding: 0 ${(props) => props.theme.spacing(4)};
+  position: relative;
   transition: all 150ms ease;
   transition-property: none;
-  position: relative;
+  user-select: none;
   &:hover {
     background: ${(props) => props.theme.clickableElementBackgroundHover};
   }
   &[data-selected='true'] {
     background: ${(props) => props.theme.secondaryBackground};
     &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      z-index: ${(props) => props.theme.lastLayerZIndex};
-      width: 3px;
-      height: 100%;
       background: ${(props) => props.theme.blue};
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      width: 3px;
+      z-index: ${(props) => props.theme.lastLayerZIndex};
     }
   }
   &[data-disabled='true'] {
@@ -64,41 +64,41 @@ export const StyledItem = styled(Command.Item)`
     cursor: not-allowed;
   }
   svg {
-    width: 16px;
-    height: 16px;
     color: ${(props) => props.theme.text80};
+    height: 16px;
+    width: 16px;
   }
 `;
 
 export const StyledList = styled(Command.List)`
+  background: ${(props) => props.theme.secondaryBackground};
   height: min(300px, var(--cmdk-list-height));
   max-height: 400px;
   overflow: auto;
   overscroll-behavior: contain;
   transition: 100ms ease;
   transition-property: height;
-  background: ${(props) => props.theme.secondaryBackground};
 `;
 
 export const StyledGroup = styled(Command.Group)`
   [cmdk-group-heading] {
-    user-select: none;
-    font-size: ${(props) => props.theme.fontSizeExtraSmall};
-    color: ${(props) => props.theme.text30};
-    padding: ${(props) => props.theme.spacing(2)};
-    display: flex;
     align-items: center;
+    color: ${(props) => props.theme.text30};
+    display: flex;
+    font-size: ${(props) => props.theme.fontSizeExtraSmall};
+    padding: ${(props) => props.theme.spacing(2)};
+    user-select: none;
   }
 `;
 
 export const StyledEmpty = styled(Command.Empty)`
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  display: flex;
   align-items: center;
-  justify-content: center;
-  height: 64px;
-  white-space: pre-wrap;
   color: ${(props) => props.theme.text30};
+  display: flex;
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  height: 64px;
+  justify-content: center;
+  white-space: pre-wrap;
 `;
 
 export const StyledSeparator = styled(Command.Separator)``;

front/src/modules/ui/components/board/BoardColumn.tsx

@@ -3,20 +3,20 @@ import styled from '@emotion/styled';
 import { DroppableProvided } from '@hello-pangea/dnd';
 
 export const StyledColumn = styled.div`
+  background-color: ${({ theme }) => theme.primaryBackground};
   display: flex;
   flex-direction: column;
-  width: 300px;
-  background-color: ${({ theme }) => theme.primaryBackground};
   padding: ${({ theme }) => theme.spacing(2)};
+  width: 300px;
 `;
 
 export const StyledColumnTitle = styled.h3`
+  color: ${({ color }) => color};
   font-family: 'Inter';
+  font-size: ${({ theme }) => theme.fontSizeMedium};
   font-style: normal;
   font-weight: ${({ theme }) => theme.fontWeightMedium};
-  font-size: ${({ theme }) => theme.fontSizeMedium};
   line-height: ${({ theme }) => theme.lineHeight};
-  color: ${({ color }) => color};
   margin: 0;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;

front/src/modules/ui/components/board/BoardItem.tsx

@@ -5,9 +5,9 @@ const StyledCard = styled.div`
   background-color: ${({ theme }) => theme.secondaryBackground};
   border: 1px solid ${({ theme }) => theme.quaternaryBackground};
   border-radius: ${({ theme }) => theme.borderRadius};
-  padding: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
   box-shadow: ${({ theme }) => theme.boxShadow};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
 type BoardCardProps = {

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -3,17 +3,17 @@ import styled from '@emotion/styled';
 import { IconPlus } from '@/ui/icons/index';
 
 const StyledButton = styled.button`
-  display: flex;
   align-items: center;
-  justify-content: center;
+  align-self: baseline;
   background-color: ${({ theme }) => theme.primaryBackground};
-  color: ${({ theme }) => theme.text40};
   border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
+  color: ${({ theme }) => theme.text40};
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  align-self: baseline;
+  display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+  transition: background-color 0.2s ease-in-out;
 
   &:hover {
     background-color: ${({ theme }) => theme.secondaryBackground};

front/src/modules/ui/components/buttons/IconButton.tsx

@@ -1,22 +1,22 @@
 import styled from '@emotion/styled';
 
 const StyledIconButton = styled.button`
-  display: flex;
   align-items: center;
-  justify-content: center;
+  background: ${(props) => props.theme.blue};
+  border: none;
 
-  width: 20px;
+  border-radius: 50%;
+  color: ${(props) => props.theme.text0};
+
+  cursor: pointer;
+  display: flex;
   height: 20px;
 
+  justify-content: center;
+
   padding: 0;
-  border: none;
-  border-radius: 50%;
-
   transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
-
-  background: ${(props) => props.theme.blue};
-  color: ${(props) => props.theme.text0};
-  cursor: pointer;
+  width: 20px;
 
   &:disabled {
     background: ${(props) => props.theme.quaternaryBackground};

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -8,14 +8,14 @@ import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
 
 export const CellBaseContainer = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 32px;
-  display: flex;
   align-items: center;
-  width: 100%;
+  box-sizing: border-box;
   cursor: pointer;
+  display: flex;
+  height: 32px;
+  position: relative;
   user-select: none;
+  width: 100%;
 `;
 
 type OwnProps = {

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -2,32 +2,32 @@ import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 export const EditableCellNormalModeOuterContainer = styled.div`
-  display: flex;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 100%;
   overflow: hidden;
-
   padding-left: ${(props) => props.theme.spacing(2)};
+
   padding-right: ${(props) => props.theme.spacing(1)};
+  width: 100%;
 
   &:hover {
-    background: ${(props) => props.theme.secondaryBackgroundTransparent};
+    -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
 
     -webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-    -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-    box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-
+    background: ${(props) => props.theme.secondaryBackgroundTransparent};
     border-radius: ${(props) => props.theme.borderRadius};
+
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
   }
 `;
 
 export const EditableCellNormalModeInnerContainer = styled.div`
-  display: flex;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 100%;
   overflow: hidden;
+  width: 100%;
 `;
 
 type OwnProps = {

front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx

@@ -10,21 +10,21 @@ import { overlayBackground } from '../../layout/styles/themes';
 import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
-  display: flex;
   align-items: center;
-  min-width: calc(100% + 20px);
-  min-height: 100%;
-  margin-left: -2px;
-  position: absolute;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 4px;
+  display: flex;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
+  margin-left: -2px;
+  min-height: 100%;
+  min-width: calc(100% + 20px);
+  position: absolute;
+
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-
-  border: 1px solid ${(props) => props.theme.primaryBorder};
   z-index: 1;
-  border-radius: 4px;
   ${overlayBackground}
 `;
 

front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx

@@ -1,17 +1,17 @@
 import styled from '@emotion/styled';
 
 export const HoverableMenuItem = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  display: flex;
   align-items: center;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 4px;
   background: rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  position: relative;
   transition: background 0.1s ease;
+  user-select: none;
+  width: 100%;
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -19,9 +19,9 @@ export type EditableChipProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input`
-  width: 100%;
   padding-left: ${(props) => props.theme.spacing(1)};
   padding-right: ${(props) => props.theme.spacing(1)};
+  width: 100%;
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -13,8 +13,8 @@ export type EditableDateProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   margin: 0px ${(props) => props.theme.spacing(2)};
 `;
 
@@ -23,14 +23,14 @@ export type StyledCalendarContainerProps = {
 };
 
 const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
-  position: absolute;
+  background: ${(props) => props.theme.secondaryBackground};
   border: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 8px;
   box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
-  z-index: 1;
   left: -10px;
+  position: absolute;
   top: 10px;
-  background: ${(props) => props.theme.secondaryBackground};
+  z-index: 1;
 `;
 export function EditableDate({
   value,

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -15,20 +15,20 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  align-items: center;
 
   & > input:last-child {
-    padding-left: ${(props) => props.theme.spacing(2)};
     border-left: 1px solid ${(props) => props.theme.primaryBorder};
+    padding-left: ${(props) => props.theme.spacing(2)};
   }
 `;
 
 const StyledEditInplaceInput = styled.input`
-  width: 45%;
   height: 18px;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 45%;
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -19,8 +19,8 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
-  width: 100%;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 100%;
   ${textInputStyle}
 `;
 

front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx

@@ -22,29 +22,29 @@ const StyledEditModeContainer = styled.div`
 `;
 
 const StyledEditModeSelectedContainer = styled.div`
-  height: 31px;
-  display: flex;
   align-items: center;
+  display: flex;
+  height: 31px;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeSearchContainer = styled.div`
-  height: 32px;
-  display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.primaryBorder};
+  display: flex;
+  height: 32px;
   padding-left: ${(props) => props.theme.spacing(1)};
   padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeCreateButtonContainer = styled.div`
-  height: 36px;
-  display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.primaryBorder};
-  padding: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text60};
+  display: flex;
+  height: 36px;
+  padding: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeSearchInput = styled.input`
@@ -64,10 +64,10 @@ type StyledEditModeResultItemProps = {
 };
 
 const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
-  height: 32px;
-  display: flex;
   align-items: center;
   cursor: pointer;
+  display: flex;
+  height: 32px;
   user-select: none;
   ${(props) =>
     props.isSelected &&
@@ -77,8 +77,8 @@ const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
 `;
 
 const StyledCreateButtonIcon = styled.div`
-  color: ${(props) => props.theme.text100};
   align-self: center;
+  color: ${(props) => props.theme.text100};
   padding-top: 4px;
 `;
 

front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx

@@ -1,19 +1,19 @@
 import styled from '@emotion/styled';
 
 export const EditableRelationCreateButton = styled.button`
-  display: flex;
   align-items: center;
+  background: none;
   border: none;
-  font-size: ${(props) => props.theme.fontSizeMedium};
+  border-radius: 4px;
   cursor: pointer;
-  user-select: none;
-  padding-top: ${(props) => props.theme.spacing(1)};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  gap: ${(props) => props.theme.spacing(2)};
+  height: 31px;
   padding-bottom: ${(props) => props.theme.spacing(1)};
   padding-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
-  border-radius: 4px;
+  padding-top: ${(props) => props.theme.spacing(1)};
+  user-select: none;
   width: 100%;
-  height: 31px;
-  background: none;
-  gap: ${(props) => props.theme.spacing(2)};
 `;

front/src/modules/ui/components/editable-cell/types/EditableText.tsx

@@ -18,8 +18,8 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input<StyledEditModeProps>`
-  width: 100%;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 100%;
   ${textInputStyle}
 `;
 

front/src/modules/ui/components/form/Checkbox.tsx

@@ -10,26 +10,26 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: center;
   display: flex;
   justify-content: center;
-  align-items: center;
 
   input[type='checkbox'] {
     accent-color: ${(props) => props.theme.blue};
-    margin: 2px;
-    height: 14px;
-    width: 14px;
     cursor: pointer;
+    height: 14px;
+    margin: 2px;
     user-select: none;
+    width: 14px;
   }
 
   input[type='checkbox']::before {
-    content: '';
     border: 1px solid ${(props) => props.theme.text40};
-    width: 12px;
-    height: 12px;
     border-radius: 2px;
+    content: '';
     display: block;
+    height: 12px;
+    width: 12px;
   }
 
   input[type='checkbox']:hover::before {

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -22,22 +22,22 @@ const StyledContainer = styled.div`
 `;
 
 const StyledTextArea = styled(TextareaAutosize)`
-  width: 100%;
-  padding: 8px;
-  font-size: 13px;
-  font-family: inherit;
-  font-weight: 400;
-  line-height: 16px;
+  background: ${(props) => props.theme.tertiaryBackground};
   border: none;
   border-radius: 5px;
-  background: ${(props) => props.theme.tertiaryBackground};
   color: ${(props) => props.theme.text80};
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
   overflow: auto;
+  padding: 8px;
   resize: none;
+  width: 100%;
 
   &:focus {
-    outline: none;
     border: none;
+    outline: none;
   }
 
   &::placeholder {
@@ -48,11 +48,11 @@ const StyledTextArea = styled(TextareaAutosize)`
 
 // TODO: this messes with the layout, fix it
 const StyledBottomRightIconButton = styled.div`
-  width: 0px;
-  position: relative;
-  top: calc(100% - 26.5px);
-  right: 26px;
   height: 0;
+  position: relative;
+  right: 26px;
+  top: calc(100% - 26.5px);
+  width: 0px;
 `;
 
 export function AutosizeTextInput({

front/src/modules/ui/components/inputs/DoubleTextInput.tsx

@@ -12,19 +12,19 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  align-items: center;
 
   & > input:last-child {
-    padding-left: ${(props) => props.theme.spacing(2)};
     border-left: 1px solid ${(props) => props.theme.primaryBorder};
+    padding-left: ${(props) => props.theme.spacing(2)};
   }
 `;
 
 const StyledEditInplaceInput = styled.input`
-  width: 45%;
   height: 18px;
+  width: 45%;
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/menu/DropdownMenu.tsx

@@ -1,20 +1,20 @@
 import styled from '@emotion/styled';
 
 export const DropdownMenu = styled.div`
-  width: 200px;
-  height: fit-content;
-
-  display: flex;
-  flex-direction: column;
   align-items: center;
+  backdrop-filter: blur(20px);
 
   background: ${(props) => props.theme.secondaryBackgroundTransparent};
-
   border: 1px solid ${(props) => props.theme.lightBorder};
-
   border-radius: calc(${(props) => props.theme.borderRadius} * 2);
 
   box-shadow: ${(props) => props.theme.modalBoxShadow};
 
-  backdrop-filter: blur(20px);
+  display: flex;
+
+  flex-direction: column;
+
+  height: fit-content;
+
+  width: 200px;
 `;

front/src/modules/ui/components/menu/DropdownMenuButton.tsx

@@ -6,25 +6,25 @@ export const DropdownMenuButton = styled.div`
   --horizontal-padding: ${(props) => props.theme.spacing(1.5)};
   --vertical-padding: ${(props) => props.theme.spacing(2)};
 
-  padding: var(--vertical-padding) var(--horizontal-padding);
+  align-items: center;
 
-  width: calc(100% - 2 * var(--horizontal-padding));
-  height: calc(32px - 2 * var(--vertical-padding));
+  border-radius: ${(props) => props.theme.borderRadius};
+  color: ${(props) => props.theme.text60};
 
+  cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
+
+  font-size: ${(props) => props.theme.fontSizeSmall};
 
   gap: ${(props) => props.theme.spacing(2)};
 
-  border-radius: ${(props) => props.theme.borderRadius};
+  height: calc(32px - 2 * var(--vertical-padding));
 
-  cursor: pointer;
-
-  user-select: none;
+  padding: var(--vertical-padding) var(--horizontal-padding);
 
   ${hoverBackground};
 
-  color: ${(props) => props.theme.text60};
-  font-size: ${(props) => props.theme.fontSizeSmall};
+  user-select: none;
+  width: calc(100% - 2 * var(--horizontal-padding));
 `;

front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx

@@ -12,23 +12,23 @@ type Props = {
 };
 
 const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
 `;
 
 const StyledLeftContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
 
   gap: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledChildrenContainer = styled.div`
-  font-size: ${(props) => props.theme.fontSizeSmall};
+  align-items: center;
 
   display: flex;
-  align-items: center;
+  font-size: ${(props) => props.theme.fontSizeSmall};
   gap: ${(props) => props.theme.spacing(2)};
 `;
 

front/src/modules/ui/components/menu/DropdownMenuItem.tsx

@@ -4,19 +4,19 @@ export const DropdownMenuItem = styled.div`
   --horizontal-padding: ${(props) => props.theme.spacing(1.5)};
   --vertical-padding: ${(props) => props.theme.spacing(2)};
 
-  padding: var(--vertical-padding) var(--horizontal-padding);
+  align-items: center;
 
-  width: calc(100% - 2 * var(--horizontal-padding));
-  height: calc(32px - 2 * var(--vertical-padding));
+  border-radius: ${(props) => props.theme.borderRadius};
+  color: ${(props) => props.theme.text60};
 
   display: flex;
   flex-direction: row;
-  align-items: center;
+  font-size: ${(props) => props.theme.fontSizeSmall};
 
   gap: ${(props) => props.theme.spacing(2)};
 
-  border-radius: ${(props) => props.theme.borderRadius};
+  height: calc(32px - 2 * var(--vertical-padding));
 
-  color: ${(props) => props.theme.text60};
-  font-size: ${(props) => props.theme.fontSizeSmall};
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  width: calc(100% - 2 * var(--horizontal-padding));
 `;

front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx

@@ -3,12 +3,12 @@ import styled from '@emotion/styled';
 export const DropdownMenuItemContainer = styled.div`
   --padding: ${(props) => props.theme.spacing(1 / 2)};
 
-  width: calc(100% - 2 * var(--padding));
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
   align-items: flex-start;
-  padding: var(--padding);
+  display: flex;
+
+  flex-direction: column;
   gap: 2px;
+  height: 100%;
+  padding: var(--padding);
+  width: calc(100% - 2 * var(--padding));
 `;

front/src/modules/ui/components/menu/DropdownMenuSearch.tsx

@@ -7,23 +7,23 @@ export const DropdownMenuSearchContainer = styled.div`
   --horizontal-padding: ${(props) => props.theme.spacing(2)};
   --vertical-padding: ${(props) => props.theme.spacing(1)};
 
-  width: calc(100% - 2 * var(--horizontal-padding));
-  height: calc(36px - 2 * var(--vertical-padding));
+  align-items: center;
+  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
 
   display: flex;
   flex-direction: row;
-  align-items: center;
+  height: calc(36px - 2 * var(--vertical-padding));
   padding: var(--vertical-padding) var(--horizontal-padding);
 
-  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
+  width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
 const StyledEditModeSearchInput = styled.input`
-  width: 100%;
+  font-size: ${(props) => props.theme.fontSizeSmall};
 
   ${textInputStyle}
 
-  font-size: ${(props) => props.theme.fontSizeSmall};
+  width: 100%;
 `;
 
 export function DropdownMenuSearch(

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -14,14 +14,14 @@ type Props = {
 const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
   ${hoverBackground};
 
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
 `;
 
 const StyledLeftContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
 
   gap: ${(props) => props.theme.spacing(2)};
 `;

front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 export const DropdownMenuSeparator = styled.div`
-  width: 100%;
+  background-color: ${(props) => props.theme.mediumBorder};
   height: 1px;
 
-  background-color: ${(props) => props.theme.mediumBorder};
+  width: 100%;
 `;

front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx

@@ -34,22 +34,22 @@ const avatarUrl =
   'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
 
 const FakeMenuContent = styled.div`
-  width: 100%;
   height: 400px;
+  width: 100%;
 `;
 
 const FakeBelowContainer = styled.div`
-  width: 300px;
   height: 600px;
-
   position: relative;
+
+  width: 300px;
 `;
 
 const MenuAbsolutePositionWrapper = styled.div`
-  width: fit-content;
   height: fit-content;
-
   position: absolute;
+
+  width: fit-content;
 `;
 
 const FakeMenuItemList = () => (

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -15,13 +15,13 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  height: 32px;
-
-  display: flex;
   align-items: center;
-  justify-content: center;
 
   cursor: pointer;
+  display: flex;
+  height: 32px;
+
+  justify-content: center;
 `;
 
 export function CheckboxCell({

front/src/modules/ui/components/table/ColumnHead.tsx

@@ -7,11 +7,11 @@ type OwnProps = {
 };
 
 const StyledTitle = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  height: ${(props) => props.theme.spacing(8)};
   font-weight: 500;
+  height: ${(props) => props.theme.spacing(8)};
   padding-left: ${(props) => props.theme.spacing(2)};
 `;
 

front/src/modules/ui/components/table/EntityTable.tsx

@@ -39,20 +39,20 @@ type OwnProps<
 };
 
 const StyledTable = styled.table`
-  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
+  border-collapse: collapse;
 
   border-radius: 4px;
   border-spacing: 0;
-  border-collapse: collapse;
   margin-left: ${(props) => props.theme.table.horizontalCellMargin};
   margin-right: ${(props) => props.theme.table.horizontalCellMargin};
   table-layout: fixed;
+  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
 
   th {
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     border-collapse: collapse;
     color: ${(props) => props.theme.text40};
     padding: 0;
-    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     text-align: left;
 
     :last-child {
@@ -63,16 +63,16 @@ const StyledTable = styled.table`
       border-right-color: transparent;
     }
     :last-of-type {
-      width: 100%;
       min-width: 0;
+      width: 100%;
     }
   }
 
   td {
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     border-collapse: collapse;
     color: ${(props) => props.theme.text80};
     padding: 0;
-    border: 1px solid ${(props) => props.theme.tertiaryBackground};
 
     text-align: left;
 
@@ -84,23 +84,23 @@ const StyledTable = styled.table`
       border-right-color: transparent;
     }
     :last-of-type {
-      width: 100%;
       min-width: 0;
+      width: 100%;
     }
   }
 `;
 
 const StyledTableWithHeader = styled.div`
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   width: 100%;
 `;
 
 const StyledTableScrollableContainer = styled.div`
-  overflow: auto;
-  height: 100%;
   flex: 1;
+  height: 100%;
+  overflow: auto;
 `;
 
 const StyledRow = styled.tr<{ selected: boolean }>`

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -15,22 +15,22 @@ type StyledContainerProps = {
 };
 
 const StyledContainer = styled.div<StyledContainerProps>`
-  display: flex;
-  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
-  z-index: 1;
-  height: 48px;
-  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
-  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
-  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
-
-  background: ${(props) => props.theme.secondaryBackground};
   align-items: center;
+  background: ${(props) => props.theme.secondaryBackground};
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 8px;
+  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
+  display: flex;
+  height: 48px;
+
+  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
-  transform: translateX(-50%);
+  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
+  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
 
-  border-radius: 8px;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
+  transform: translateX(-50%);
+  z-index: 1;
 `;
 
 export function EntityTableActionBar({ children }: OwnProps) {

front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx

@@ -13,16 +13,16 @@ type StyledButtonProps = {
 };
 
 const StyledButton = styled.div<StyledButtonProps>`
-  display: flex;
-  cursor: pointer;
-  user-select: none;
+  border-radius: 4px;
   color: ${(props) =>
     props.type === 'warning' ? props.theme.red : props.theme.text60};
+  cursor: pointer;
+  display: flex;
   justify-content: center;
 
   padding: ${(props) => props.theme.spacing(2)};
-  border-radius: 4px;
   transition: background 0.1s ease;
+  user-select: none;
 
   &:hover {
     background: ${(props) => props.theme.tertiaryBackground};
@@ -30,8 +30,8 @@ const StyledButton = styled.div<StyledButtonProps>`
 `;
 
 const StyledButtonLabel = styled.div`
-  margin-left: ${(props) => props.theme.spacing(2)};
   font-weight: 500;
+  margin-left: ${(props) => props.theme.spacing(2)};
 `;
 
 export function EntityTableActionBarButton({

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -31,18 +31,18 @@ type StyledDropdownButtonProps = {
 };
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
-  display: flex;
-  cursor: pointer;
-  user-select: none;
   background: ${(props) => props.theme.primaryBackground};
+  border-radius: 4px;
   color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
-  padding: ${(props) => props.theme.spacing(1)};
+  cursor: pointer;
+  display: flex;
+  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
-  padding-right: ${(props) => props.theme.spacing(2)};
+  padding: ${(props) => props.theme.spacing(1)};
   padding-left: ${(props) => props.theme.spacing(2)};
 
-  border-radius: 4px;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
+  padding-right: ${(props) => props.theme.spacing(2)};
+  user-select: none;
 
   &:hover {
     filter: brightness(0.95);
@@ -50,19 +50,19 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
 `;
 
 const StyledDropdown = styled.ul`
+  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
   --wraper-border: 1px;
   --wraper-border-radius: 8px;
-  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
 
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 14px;
-  right: 0;
   border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
   border-radius: var(--wraper-border-radius);
-  padding: 0px;
+  display: flex;
+  flex-direction: column;
   min-width: 160px;
+  padding: 0px;
+  position: absolute;
+  right: 0;
+  top: 14px;
   ${overlayBackground}
   li {
     &:first-of-type {
@@ -70,24 +70,24 @@ const StyledDropdown = styled.ul`
       border-top-right-radius: var(--outer-border-radius);
     }
     &:last-of-type {
+      border-bottom: 0;
       border-bottom-left-radius: var(--outer-border-radius);
       border-bottom-right-radius: var(--outer-border-radius);
-      border-bottom: 0;
     }
   }
 `;
 
 const StyledDropdownItem = styled.li`
-  display: flex;
   align-items: center;
-  width: calc(160px - ${(props) => props.theme.spacing(4)});
+  border-radius: 2px;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  display: flex;
+  margin: 2px;
   padding: ${(props) => props.theme.spacing(2)}
     calc(${(props) => props.theme.spacing(2)} - 2px);
-  margin: 2px;
-  cursor: pointer;
   user-select: none;
-  color: ${(props) => props.theme.text60};
-  border-radius: 2px;
+  width: calc(160px - ${(props) => props.theme.spacing(4)});
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
@@ -96,54 +96,54 @@ const StyledDropdownItem = styled.li`
 
 const StyledDropdownItemClipped = styled.span`
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledDropdownTopOption = styled.li`
-  display: flex;
   align-items: center;
+  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+  color: ${(props) => props.theme.text80};
+  cursor: pointer;
+  display: flex;
+  font-weight: ${(props) => props.theme.fontWeightMedium};
   justify-content: space-between;
   padding: calc(${(props) => props.theme.spacing(2)} + 2px)
     calc(${(props) => props.theme.spacing(2)});
-  cursor: pointer;
-  user-select: none;
-  color: ${(props) => props.theme.text80};
-  font-weight: ${(props) => props.theme.fontWeightMedium};
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
   }
-  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+  user-select: none;
 `;
 
 const StyledIcon = styled.div`
   display: flex;
+  justify-content: center;
   margin-right: ${(props) => props.theme.spacing(1)};
   min-width: ${(props) => props.theme.spacing(4)};
-  justify-content: center;
 `;
 
 const StyledSearchField = styled.li`
-  display: flex;
   align-items: center;
-  justify-content: space-between;
-
-  cursor: pointer;
-  user-select: none;
-  color: ${(props) => props.theme.text60};
-  font-weight: ${(props) => props.theme.fontWeightMedium};
   border-bottom: var(--wraper-border) solid
     ${(props) => props.theme.primaryBorder};
+  color: ${(props) => props.theme.text60};
 
+  cursor: pointer;
+  display: flex;
+  font-weight: ${(props) => props.theme.fontWeightMedium};
+  justify-content: space-between;
   overflow: hidden;
+
+  user-select: none;
   input {
-    height: 36px;
-    width: 100%;
-    padding: 8px;
+    border-radius: 8px;
     box-sizing: border-box;
     font-family: ${(props) => props.theme.fontFamily};
-    border-radius: 8px;
+    height: 36px;
+    padding: 8px;
+    width: 100%;
 
     ${textInputStyle}
 

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -18,43 +18,43 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
 };
 
 const StyledBar = styled.div`
+  align-items: center;
+  border-top: 1px solid ${(props) => props.theme.primaryBorder};
   display: flex;
   flex-direction: row;
-  border-top: 1px solid ${(props) => props.theme.primaryBorder};
-  align-items: center;
-  justify-content: space-between;
   height: 40px;
+  justify-content: space-between;
 `;
 
 const StyledChipcontainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  overflow-x: auto;
-  margin-left: ${(props) => props.theme.spacing(2)};
   gap: ${(props) => props.theme.spacing(1)};
+  height: 40px;
+  justify-content: space-between;
+  margin-left: ${(props) => props.theme.spacing(2)};
+  overflow-x: auto;
 `;
 
 const StyledCancelButton = styled.button`
-  margin-left: auto;
-  border: none;
   background-color: inherit;
+  border: none;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  font-weight: 500;
+  margin-left: auto;
+  margin-right: ${(props) => props.theme.spacing(2)};
   padding: ${(props) => {
     const horiz = props.theme.spacing(2);
     const vert = props.theme.spacing(1);
     return `${vert} ${horiz} ${vert} ${horiz}`;
   }};
-  color: ${(props) => props.theme.text60};
-  font-weight: 500;
-  margin-right: ${(props) => props.theme.spacing(2)};
-  cursor: pointer;
   user-select: none;
 
   &:hover {
-    border-radius: ${(props) => props.theme.spacing(1)};
     background-color: ${(props) => props.theme.tertiaryBackground};
+    border-radius: ${(props) => props.theme.spacing(1)};
   }
 `;
 

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -12,31 +12,31 @@ type OwnProps = {
 };
 
 const StyledChip = styled.div`
-  border-radius: 50px;
-  display: flex;
-  flex-direction: row;
+  align-items: center;
   background-color: ${(props) => props.theme.blueHighTransparency};
   border: 1px solid ${(props) => props.theme.blueLowTransparency};
+  border-radius: 50px;
   color: ${(props) => props.theme.blue};
-  padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
-  font-size: ${(props) => props.theme.fontSizeSmall};
-  align-items: center;
+  display: flex;
+  flex-direction: row;
   flex-shrink: 0;
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
 `;
 const StyledIcon = styled.div`
-  margin-right: ${(props) => props.theme.spacing(1)};
-  display: flex;
   align-items: center;
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledDelete = styled.div`
-  margin-left: ${(props) => props.theme.spacing(2)};
-  cursor: pointer;
-  user-select: none;
-  display: flex;
   align-items: center;
+  cursor: pointer;
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeSmall};
+  margin-left: ${(props) => props.theme.spacing(2)};
   margin-top: 1px;
+  user-select: none;
 `;
 
 const StyledLabelKey = styled.div`

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -30,13 +30,13 @@ const StyledContainer = styled.div`
 `;
 
 const StyledTableHeader = styled.div`
+  align-items: center;
+  color: ${(props) => props.theme.text60};
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  color: ${(props) => props.theme.text60};
   font-weight: 500;
+  height: 40px;
+  justify-content: space-between;
   padding-left: ${(props) => props.theme.spacing(3)};
   padding-right: ${(props) => props.theme.spacing(2)};
 `;

front/src/modules/ui/layout/DefaultLayout.tsx

@@ -9,20 +9,20 @@ import { isNavbarOpenedState } from './states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from './styles/themes';
 
 const StyledLayout = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: 100vw;
   height: 100vh;
-  background: ${(props) => props.theme.noisyBackground};
   position: relative;
+  width: 100vw;
 `;
 
 const NAVBAR_WIDTH = '236px';
 
 const MainContainer = styled.div`
-  overflow: hidden;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
   width: ${() =>
     useRecoilValue(isNavbarOpenedState)
       ? `(calc(100% -  ${NAVBAR_WIDTH})`

front/src/modules/ui/layout/Panel.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledPanel = styled.div`
-  display: flex;
   background: ${(props) => props.theme.primaryBackground};
-  border-radius: 8px;
   border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 8px;
+  display: flex;
   width: 100%;
 `;
 

front/src/modules/ui/layout/SecondaryLayout.tsx

@@ -9,31 +9,31 @@ type OwnProps = {
 };
 
 const StyledLayout = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: 100vw;
   height: 100vh;
-  background: ${(props) => props.theme.noisyBackground};
   position: relative;
+  width: 100vw;
 `;
 const MainContainer = styled.div`
-  overflow: hidden;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
   width: 100%;
 `;
 
 const SubContainer = styled.div`
+  background: ${(props) => props.theme.primaryBackground};
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: ${(props) => props.theme.spacing(2)};
   display: flex;
   flex-direction: column;
-  background: ${(props) => props.theme.primaryBackground};
-  border-radius: ${(props) => props.theme.spacing(2)};
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  padding: ${(props) => props.theme.spacing(2)};
   margin: ${(props) => props.theme.spacing(4)};
-  width: 100%;
   max-width: calc(100vw - 500px);
   padding: 32px;
+  padding: ${(props) => props.theme.spacing(2)};
+  width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
@@ -42,11 +42,11 @@ const SubContainer = styled.div`
 `;
 
 const SubSubContainer = styled.div`
+  color: ${(props) => props.theme.text100};
   display: flex;
-  width: 350px;
   flex-direction: column;
   gap: 32px;
-  color: ${(props) => props.theme.text100};
+  width: 350px;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;

front/src/modules/ui/layout/containers/WithTopBarContainer.tsx

@@ -21,17 +21,17 @@ const StyledContainer = styled.div`
 `;
 
 const MainContainer = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: calc(100% - ${(props) => props.theme.spacing(3)});
+  gap: ${(props) => props.theme.spacing(2)};
   height: calc(
     100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
       ${(props) => props.theme.spacing(5)}
   );
-  background: ${(props) => props.theme.noisyBackground};
-  padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};
-  gap: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(3)};
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
 `;
 
 type LeftContainerProps = {
@@ -40,6 +40,7 @@ type LeftContainerProps = {
 
 const LeftContainer = styled.div<LeftContainerProps>`
   display: flex;
+  position: relative;
   width: calc(
     100% -
       ${(props) =>
@@ -47,7 +48,6 @@ const LeftContainer = styled.div<LeftContainerProps>`
           ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
           : '0px'}
   );
-  position: relative;
 `;
 
 export function WithTopBarContainer({

front/src/modules/ui/layout/navbar/NavBackButton.tsx

@@ -10,17 +10,17 @@ type OwnProps = {
 };
 
 const IconAndButtonContainer = styled.button`
+  align-items: center;
+  background: inherit;
+  border: none;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
-  gap: ${(props) => props.theme.spacing(1)};
   font-size: ${(props) => props.theme.fontSizeLarge};
   font-weight: ${(props) => props.theme.fontWeightSemibold};
-  color: ${(props) => props.theme.text60};
-  border: none;
-  background: inherit;
-  cursor: pointer;
+  gap: ${(props) => props.theme.spacing(1)};
+  padding: ${(props) => props.theme.spacing(1)};
   width: 100%;
 `;
 

front/src/modules/ui/layout/navbar/NavCollapseButton.tsx

@@ -10,21 +10,21 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from '../styles/themes';
 
 const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
-  display: flex;
   align-items: center;
-  justify-content: center;
-
-  width: 32px;
-  height: 32px;
-
-  user-select: none;
-  border: 0;
   background: inherit;
-
-  padding: 0;
-  cursor: pointer;
+  border: 0;
 
   color: ${(props) => props.theme.text30};
+  cursor: pointer;
+
+  display: flex;
+  height: 32px;
+  justify-content: center;
+
+  padding: 0;
+  user-select: none;
+
+  width: 32px;
 
   ${(props) =>
     props.hideOnDesktop &&

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -21,18 +21,10 @@ type StyledItemProps = {
 };
 
 const StyledItem = styled.button<StyledItemProps>`
-  display: flex;
   align-items: center;
-  border: none;
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
-  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
-  user-select: none;
   background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
-  padding-top: ${(props) => props.theme.spacing(1)};
-  padding-bottom: ${(props) => props.theme.spacing(1)};
-  padding-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
+  border: none;
+  border-radius: 4px;
   color: ${(props) => {
     if (props.active) {
       return props.theme.text100;
@@ -45,12 +37,20 @@ const StyledItem = styled.button<StyledItemProps>`
     }
     return props.theme.text60;
   }};
-  border-radius: 4px;
+  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-top: ${(props) => props.theme.spacing(1)};
+  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
   :hover {
     background: rgba(0, 0, 0, 0.04);
     color: ${(props) => (props.danger ? props.theme.red : props.theme.text100)};
   }
-  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+  user-select: none;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     font-size: ${(props) => props.theme.fontSizeLarge};

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -5,14 +5,14 @@ type OwnProps = {
 };
 
 const StyledTitle = styled.div`
-  display: flex;
-  text-transform: uppercase;
   color: ${(props) => props.theme.text30};
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeExtraSmall};
   font-weight: 600;
-  padding-top: ${(props) => props.theme.spacing(8)};
   padding-bottom: ${(props) => props.theme.spacing(2)};
   padding-left: ${(props) => props.theme.spacing(1)};
+  padding-top: ${(props) => props.theme.spacing(8)};
+  text-transform: uppercase;
 `;
 
 function NavTitle({ label }: OwnProps) {

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -6,24 +6,24 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import NavCollapseButton from './NavCollapseButton';
 
 const StyledContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  height: 34px;
   align-items: center;
-  user-select: none;
-  border: 0;
+  align-self: flex-start;
   background: inherit;
+  border: 0;
+  display: flex;
+  height: 34px;
+  justify-content: space-between;
+  margin-left: ${(props) => props.theme.spacing(1)};
   padding: ${(props) => props.theme.spacing(2)};
   padding-top: ${(props) => props.theme.spacing(1)};
-  margin-left: ${(props) => props.theme.spacing(1)};
-  align-self: flex-start;
+  user-select: none;
   width: 100%;
 `;
 
 const LogoAndNameContainer = styled.div`
-  display: flex;
   align-items: center;
   cursor: pointer;
+  display: flex;
 `;
 
 type StyledLogoProps = {
@@ -33,17 +33,17 @@ type StyledLogoProps = {
 const StyledLogo = styled.div<StyledLogoProps>`
   background: url(${(props) => props.logo});
   background-size: cover;
-  width: 16px;
-  height: 16px;
   border-radius: 2px;
+  height: 16px;
+  width: 16px;
 `;
 
 const StyledName = styled.div`
-  margin-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
-  font-weight: 500;
-  font-size: ${(props) => props.theme.fontSizeLarge};
   color: ${(props) => props.theme.text80};
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeLarge};
+  font-weight: 500;
+  margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
 function NavWorkspaceButton() {

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -21,10 +21,10 @@ const StyledNavbarContainer = styled.div<{ width: string }>`
 
 const NavbarSubContainer = styled.div`
   display: flex;
-  width: 160px;
   flex-direction: column;
-  margin-top: 41px;
   margin-left: auto;
+  margin-top: 41px;
+  width: 160px;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;

front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx

@@ -3,6 +3,6 @@ import styled from '@emotion/styled';
 export const RightDrawerPage = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: 100%;
+  width: 100%;
 `;

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -3,16 +3,16 @@ import styled from '@emotion/styled';
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 
 const StyledRightDrawerTopBar = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
+  color: ${(props) => props.theme.text60};
   display: flex;
   flex-direction: row;
-  min-height: 40px;
-  align-items: center;
+  font-size: 13px;
   justify-content: space-between;
+  min-height: 40px;
   padding-left: 8px;
   padding-right: 8px;
-  font-size: 13px;
-  color: ${(props) => props.theme.text60};
-  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
 `;
 
 const StyledTopBarTitle = styled.div`

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -6,19 +6,19 @@ import { IconPlus } from '@/ui/icons/index';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 
 const StyledButton = styled.button`
-  height: 24px;
-  width: 24px;
-  border: 1px solid ${(props) => props.theme.lightBorder};
+  align-items: center;
   background: none;
+  border: 1px solid ${(props) => props.theme.lightBorder};
+  border-radius: 4px;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  height: 24px;
   padding: 3px;
 
-  border-radius: 4px;
-
   transition: ${(props) => props.theme.clickableElementBackgroundTransition};
+
+  width: 24px;
   &:hover {
     background: ${(props) => props.theme.clickableElementBackgroundHover};
   }

front/src/modules/ui/layout/styles/themes.ts

@@ -124,22 +124,22 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
 
 export const overlayBackground = (props: any) =>
   css`
-    background: ${props.theme.secondaryBackgroundTransparent};
     backdrop-filter: blur(8px);
+    background: ${props.theme.secondaryBackgroundTransparent};
     box-shadow: ${props.theme.modalBoxShadow};
   `;
 
 export const textInputStyle = (props: any) =>
   css`
-    border: none;
-    outline: none;
     background-color: transparent;
+    border: none;
     color: ${props.theme.text80};
+    outline: none;
 
     &::placeholder,
     &::-webkit-input-placeholder {
-      font-family: ${props.theme.fontFamily};
       color: ${props.theme.text30};
+      font-family: ${props.theme.fontFamily};
       font-weight: ${props.theme.fontWeightMedium};
     }
   `;

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -8,38 +8,38 @@ import NavCollapseButton from '../navbar/NavCollapseButton';
 export const TOP_BAR_MIN_HEIGHT = '40px';
 
 const TopBarContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  min-height: ${TOP_BAR_MIN_HEIGHT};
   align-items: center;
   background: ${(props) => props.theme.noisyBackground};
-  padding: ${(props) => props.theme.spacing(2)};
-  font-size: 14px;
   color: ${(props) => props.theme.text80};
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  min-height: ${TOP_BAR_MIN_HEIGHT};
+  padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const TitleContainer = styled.div`
-  font-family: 'Inter';
-  margin-left: 4px;
-  font-size: 14px;
   display: flex;
+  font-family: 'Inter';
+  font-size: 14px;
+  margin-left: 4px;
   width: 100%;
 `;
 
 const AddButtonContainer = styled.div`
-  display: flex;
-  justify-self: flex-end;
-  flex-shrink: 0;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  width: 28px;
-  height: 28px;
   align-items: center;
-  justify-content: center;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 4px;
   color: ${(props) => props.theme.text80};
   cursor: pointer;
-  user-select: none;
+  display: flex;
+  flex-shrink: 0;
+  height: 28px;
+  justify-content: center;
+  justify-self: flex-end;
   margin-right: ${(props) => props.theme.spacing(1)};
+  user-select: none;
+  width: 28px;
 `;
 
 type OwnProps = {

front/src/modules/ui/layout/top-bar/TopTitle.tsx

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 import NavCollapseButton from '../navbar/NavCollapseButton';
 
 const TitleAndCollapseContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
 `;
 
 const TitleContainer = styled.div`
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeLarge};
   font-weight: ${(props) => props.theme.fontWeightSemibold};
-  display: flex;
   width: 100%;
 `;
 

front/src/modules/users/components/Avatar.tsx

@@ -10,23 +10,23 @@ type OwnProps = {
 };
 
 export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholderLetter'>>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
-  background-image: url(${(props) =>
-    isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
+  align-items: center;
   background-color: ${(props) =>
     !isNonEmptyString(props.avatarUrl)
       ? props.theme.tertiaryBackground
       : 'none'};
-  background-repeat: no-repeat;
+  background-image: url(${(props) =>
+    isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
   background-position: center center;
+  background-repeat: no-repeat;
   background-size: cover;
-
+  border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
   display: flex;
-  align-items: center;
 
+  height: ${(props) => props.size}px;
   justify-content: center;
+
+  width: ${(props) => props.size}px;
 `;
 
 type StyledPlaceholderLetterProps = {
@@ -34,17 +34,17 @@ type StyledPlaceholderLetterProps = {
 };
 
 export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-
-  font-size: 12px;
-  font-weight: 500;
+  align-items: center;
+  color: ${(props) => props.theme.text80};
 
   display: flex;
-  align-items: center;
+  font-size: 12px;
+
+  font-weight: 500;
+  height: ${(props) => props.size}px;
   justify-content: center;
 
-  color: ${(props) => props.theme.text80};
+  width: ${(props) => props.size}px;
 `;
 
 export function Avatar({

front/src/pages/people/People.tsx

@@ -29,8 +29,8 @@ import { availableSorts } from './people-sorts';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
-  width: 100%;
   height: 100%;
+  width: 100%;
 `;
 
 export function People() {

front/src/testing/ComponentStorybookLayout.tsx

@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 
 const StyledLayout = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: fit-content;
-  height: fit-content;
-
-  padding: 20px;
   background: ${(props) => props.theme.primaryBackground};
   border-radius: 5px;
   box-shadow: 0px 0px 2px;
+  display: flex;
+
+  flex-direction: row;
+  height: fit-content;
+  padding: 20px;
+  width: fit-content;
 `;
 
 type OwnProps = {

front/src/testing/FullHeightStorybookLayout.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 const StyledLayout = styled.div`
   display: flex;
   flex-direction: row;
-  width: calc(100vw - 32px);
   height: calc(100vh - 32px);
+  width: calc(100vw - 32px);
 `;
 
 type OwnProps = {