From 02dfc30a7bad43bae41f3dfd647c201db99ee2bc Mon Sep 17 00:00:00 2001
From: xeronimus <xeronimus@gmail.com>
Date: Sat, 1 Jul 2023 16:37:22 +0200
Subject: [PATCH] #58 use transient attributes in styled-components

---
 client/app/components/ActionLog/ActionLog.js  |  4 +--
 client/app/components/ActionLog/_styled.js    |  6 ++--
 client/app/components/Backlog/Backlog.js      |  2 +-
 .../Backlog/BacklogFileDropWrapper.js         |  6 ++--
 .../app/components/Backlog/BacklogToolbar.js  |  2 +-
 client/app/components/Backlog/Story.js        |  6 ++--
 .../app/components/Backlog/StoryEditForm.js   |  2 +-
 client/app/components/Backlog/_styled.js      | 34 +++++++++----------
 client/app/components/EstimationArea/Card.js  |  4 +--
 .../EstimationArea/ConfidenceButtons.js       |  2 +-
 .../EstimationArea/EstimationArea.js          |  6 ++--
 .../EstimationArea/EstimationSummaryCard.js   |  4 +--
 .../app/components/EstimationArea/_styled.js  | 18 +++++-----
 .../EstimationMatrixColumn.js                 |  4 +--
 .../components/EstimationMatrix/_styled.js    | 10 +++---
 client/app/components/Help/Help.js            |  2 +-
 client/app/components/Help/_styled.js         |  2 +-
 client/app/components/Landing/Landing.js      |  2 +-
 client/app/components/Landing/_styled.js      |  2 +-
 client/app/components/Room/Board.js           |  2 +-
 client/app/components/Room/MatrixToggle.js    |  4 +--
 client/app/components/Room/_styled.js         |  2 +-
 .../Settings/CardConfigEditorItem.js          |  2 +-
 client/app/components/Settings/Settings.js    |  2 +-
 .../app/components/Settings/UserSettings.js   |  2 +-
 client/app/components/Settings/_styled.js     |  6 ++--
 client/app/components/TopBar/TopBar.js        |  2 +-
 client/app/components/TopBar/_styled.js       |  2 +-
 client/app/components/Users/User.js           |  4 +--
 .../components/Users/UserEstimationCard.js    |  6 ++--
 client/app/components/Users/_styled.js        | 12 +++----
 client/app/components/common/Avatar.js        |  4 +--
 .../app/components/common/StoryDescription.js |  4 +--
 client/app/components/common/ValueBadge.js    |  5 ++-
 client/app/components/common/_styled.js       | 22 ++++++------
 35 files changed, 101 insertions(+), 98 deletions(-)

diff --git a/client/app/components/ActionLog/ActionLog.js b/client/app/components/ActionLog/ActionLog.js
index 2e0dd230..2a22dc66 100644
--- a/client/app/components/ActionLog/ActionLog.js
+++ b/client/app/components/ActionLog/ActionLog.js
@@ -20,13 +20,13 @@ import {
 const ActionLog = ({actionLog, shown}) => {
   const {t} = useContext(L10nContext);
   return (
-    <StyledActionLog shown={shown}>
+    <StyledActionLog $shown={shown}>
       <h4>{t('log')}</h4>
 
       <StyledActionLogInner>
         <StyledActionLogList>
           {actionLog.map((entry) => (
-            <StyledActionLogListItem isError={entry.isError} key={`logline_${entry.logId}`}>
+            <StyledActionLogListItem $isError={entry.isError} key={`logline_${entry.logId}`}>
               <span>{entry.tstamp}</span>
               <span style={{whiteSpace: 'pre-line'}}>{entry.message}</span>
             </StyledActionLogListItem>
diff --git a/client/app/components/ActionLog/_styled.js b/client/app/components/ActionLog/_styled.js
index 02861410..daf3a837 100644
--- a/client/app/components/ActionLog/_styled.js
+++ b/client/app/components/ActionLog/_styled.js
@@ -9,7 +9,7 @@ import {
 } from '../colors';
 
 export const StyledActionLog = styled.div`
-  display: ${({shown}) => (shown ? 'block' : 'none')};
+  display: ${({$shown}) => ($shown ? 'block' : 'none')};
   -webkit-overflow-scrolling: touch;
   box-sizing: border-box;
   padding: 0 8px;
@@ -40,8 +40,8 @@ export const StyledActionLogListItem = styled.li`
   margin-bottom: 8px;
   box-sizing: border-box;
   border: 1px solid ${COLOR_LIGHTER_GREY};
-  border-left: ${({isError}) =>
-    isError ? '2px solid ' + COLOR_WARNING : '1px solid ' + COLOR_LIGHTER_GREY};
+  border-left: ${({$isError}) =>
+    $isError ? '2px solid ' + COLOR_WARNING : '1px solid ' + COLOR_LIGHTER_GREY};
 
   > span {
     display: block;
diff --git a/client/app/components/Backlog/Backlog.js b/client/app/components/Backlog/Backlog.js
index ec597c56..3ba8714f 100644
--- a/client/app/components/Backlog/Backlog.js
+++ b/client/app/components/Backlog/Backlog.js
@@ -52,7 +52,7 @@ const Backlog = ({
   }, []);
 
   return (
-    <StyledBacklog shown={backlogShown} data-testid="backlog" width={backlogWidth}>
+    <StyledBacklog $shown={backlogShown} data-testid="backlog" $width={backlogWidth}>
       <StyledBacklogWidthDragHandle ref={drag}>
         <div />
         <div />
diff --git a/client/app/components/Backlog/BacklogFileDropWrapper.js b/client/app/components/Backlog/BacklogFileDropWrapper.js
index 2ebe7e3a..79ca8fb5 100644
--- a/client/app/components/Backlog/BacklogFileDropWrapper.js
+++ b/client/app/components/Backlog/BacklogFileDropWrapper.js
@@ -39,9 +39,9 @@ const BacklogFileDropWrapper = ({importCsvFile, children}) => {
   return (
     <div {...getRootProps()}>
       <StyledFileImportDropZoneOverlay
-        active={isDragActive}
-        isAccept={isDragAccept}
-        isReject={isDragReject}
+        $active={isDragActive}
+        $isAccept={isDragAccept}
+        $isReject={isDragReject}
       />
       {children}
     </div>
diff --git a/client/app/components/Backlog/BacklogToolbar.js b/client/app/components/Backlog/BacklogToolbar.js
index dddf5897..261133fb 100644
--- a/client/app/components/Backlog/BacklogToolbar.js
+++ b/client/app/components/Backlog/BacklogToolbar.js
@@ -43,7 +43,7 @@ const BacklogToolbar = ({filterQuery, onQueryChanged, sorting, onSortingChanged,
           <StyledDropdown data-testid="sortOptions">
             {sortings.map((sortingItem) => (
               <StyledSortDropdownItem
-                selected={sortingItem.id === sorting.id}
+                $selected={sortingItem.id === sorting.id}
                 className="clickable"
                 key={`sorting-item-${sortingItem.id}`}
                 onClick={() => onSortingOptionClicked(sortingItem)}
diff --git a/client/app/components/Backlog/Story.js b/client/app/components/Backlog/Story.js
index 27398816..c24f022f 100644
--- a/client/app/components/Backlog/Story.js
+++ b/client/app/components/Backlog/Story.js
@@ -76,10 +76,10 @@ const Story = ({
       id={'story.' + story.id}
       data-testid={isSelected ? 'storySelected' : 'story'}
       onClick={onStoryClicked}
-      selected={isSelected}
-      highlighted={isHighlighted}
+      $selected={isSelected}
+      $highlighted={isHighlighted}
       className={isWaiting ? 'waiting-spinner' : ''}
-      isDragging={isDragging}
+      $isDragging={isDragging}
     >
       <StyledStoryToolbar>
         <i
diff --git a/client/app/components/Backlog/StoryEditForm.js b/client/app/components/Backlog/StoryEditForm.js
index 15348ab8..ef01cf4f 100644
--- a/client/app/components/Backlog/StoryEditForm.js
+++ b/client/app/components/Backlog/StoryEditForm.js
@@ -25,7 +25,7 @@ const StoryEditForm = ({story, selectedStoryId, changeStory, cancelEditStory, is
 
   return (
     <StyledStory
-      noShadow={true}
+      $noShadow={true}
       className={isWaiting ? 'waiting-spinner' : ''}
       data-testid={isSelected ? 'storySelected' : 'story'}
     >
diff --git a/client/app/components/Backlog/_styled.js b/client/app/components/Backlog/_styled.js
index 2580ef97..a9c722e5 100644
--- a/client/app/components/Backlog/_styled.js
+++ b/client/app/components/Backlog/_styled.js
@@ -12,7 +12,7 @@ import {device, TOPBAR_HEIGHT} from '../dimensions';
 
 export const StyledBacklog = styled.div.attrs((props) => ({
   style: {
-    width: props.shown ? '100%' : props.width + 'px'
+    width: props.$shown ? '100%' : props.$width + 'px'
   }
 }))`
   position: relative;
@@ -22,7 +22,7 @@ export const StyledBacklog = styled.div.attrs((props) => ({
   flex-shrink: 0;
   flex-grow: 0;
 
-  display: ${({shown}) => (shown ? 'flex' : 'none')};
+  display: ${({$shown}) => ($shown ? 'flex' : 'none')};
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
@@ -160,7 +160,7 @@ const dzOverlayRejectBorder = '4px dashed rgba(255, 130, 10, 0.3)';
 const dzOverlayRejectBg = 'rgba(255, 130, 10, 0.06)';
 
 export const StyledFileImportDropZoneOverlay = styled.div`
-  display: ${({active}) => (active ? 'block' : 'none')};
+  display: ${({$active}) => ($active ? 'block' : 'none')};
   position: absolute;
   left: 0;
   right: 0;
@@ -169,18 +169,18 @@ export const StyledFileImportDropZoneOverlay = styled.div`
   margin: 4px;
   font-size: 62px;
   color: rgba(0, 153, 204, 0.25);
-  z-index: ${({active}) => (active ? 1000 : 0)};
+  z-index: ${({$active}) => ($active ? 1000 : 0)};
 
-  border: ${({active, isAccept, isReject}) =>
-    active && isAccept
+  border: ${({$active, $isAccept, $isReject}) =>
+    $active && $isAccept
       ? dzOverlayAcceptBorder
-      : active && isReject
+      : $active && $isReject
       ? dzOverlayRejectBorder
       : 'none'};
-  background: ${({active, isAccept, isReject}) =>
-    active && isAccept
+  background: ${({$active, $isAccept, $isReject}) =>
+    $active && $isAccept
       ? dzOverlayAcceptBg
-      : active && isReject
+      : $active && $isReject
       ? dzOverlayRejectBg
       : 'transparent'};
 `;
@@ -193,17 +193,17 @@ export const StyledStory = styled.div`
   box-sizing: border-box;
   border: 1px solid ${COLOR_LIGHTER_GREY};
   cursor: pointer;
-  opacity: ${(props) => (props.isDragging ? 0 : 1)};
-  border-left: ${({selected, highlighted}) =>
-    selected
+  opacity: ${(props) => (props.$isDragging ? 0 : 1)};
+  border-left: ${({$selected, $highlighted}) =>
+    $selected
       ? '2px solid ' + COLOR_ORANGE
-      : highlighted
+      : $highlighted
       ? '1px solid ' + COLOR_BLUE
       : '1px solid ' + COLOR_LIGHTER_GREY};
 
   &:hover {
-    box-shadow: ${({noShadow}) =>
-      noShadow ? 'none' : 'inset 0 82px 50px -60px rgba(194, 194, 194, 0.45)'};
+    box-shadow: ${({$noShadow}) =>
+      $noShadow ? 'none' : 'inset 0 82px 50px -60px rgba(194, 194, 194, 0.45)'};
   }
 `;
 
@@ -295,7 +295,7 @@ export const StyledBacklogToolbar = styled.form`
 `;
 
 export const StyledSortDropdownItem = styled.div`
-  color: ${({selected}) => (selected ? COLOR_LIGHTER_GREY : 'inherit')};
+  color: ${({$selected}) => ($selected ? COLOR_LIGHTER_GREY : 'inherit')};
 
   > i {
     margin-right: 4px;
diff --git a/client/app/components/EstimationArea/Card.js b/client/app/components/EstimationArea/Card.js
index 00579dad..5143f74d 100644
--- a/client/app/components/EstimationArea/Card.js
+++ b/client/app/components/EstimationArea/Card.js
@@ -14,8 +14,8 @@ const Card = ({isWaiting, isSelected, cardCfg, onClick}) => {
     <StyledCard onClick={onClick} data-testid={'estimationCard.' + cardCfg.value}>
       <StyledCardInner
         className={isWaiting ? 'waiting-spinner' : ''}
-        cardColor={cardCfg.color}
-        selected={isSelected}
+        $cardColor={cardCfg.color}
+        $selected={isSelected}
       >
         {cardCfg.label}
       </StyledCardInner>
diff --git a/client/app/components/EstimationArea/ConfidenceButtons.js b/client/app/components/EstimationArea/ConfidenceButtons.js
index 8c7d1b8d..537b7174 100644
--- a/client/app/components/EstimationArea/ConfidenceButtons.js
+++ b/client/app/components/EstimationArea/ConfidenceButtons.js
@@ -44,7 +44,7 @@ const ConfButton = ({label, title, onClick, active}) => (
     className="pure-button"
     type="button"
     onClick={onClick}
-    active={active}
+    $active={active}
     title={title}
   >
     {label}
diff --git a/client/app/components/EstimationArea/EstimationArea.js b/client/app/components/EstimationArea/EstimationArea.js
index e4960c48..4781ed3f 100644
--- a/client/app/components/EstimationArea/EstimationArea.js
+++ b/client/app/components/EstimationArea/EstimationArea.js
@@ -64,14 +64,14 @@ const EstimationArea = ({
           textExpandThreshold={500}
         />
 
-        {hasConsensus && applause && <StyledApplauseHighlight color={consensusCardConfig.color} />}
+        {hasConsensus && applause && <StyledApplauseHighlight $color={consensusCardConfig.color} />}
         {hasConsensus && activeEasterEgg && applause && (
           <EasterEgg activeEasterEgg={activeEasterEgg} />
         )}
       </StyledSelectedStory>
 
       {!revealed && (
-        <EstimationAreaButtons alignment="space-between">
+        <EstimationAreaButtons $alignment="space-between">
           <button
             type="button"
             className="pure-button pure-button-primary"
@@ -85,7 +85,7 @@ const EstimationArea = ({
 
       {revealed && (
         <React.Fragment>
-          <EstimationAreaButtons alignment="flex-end">
+          <EstimationAreaButtons $alignment="flex-end">
             <button
               type="button"
               className="pure-button pure-button-primary"
diff --git a/client/app/components/EstimationArea/EstimationSummaryCard.js b/client/app/components/EstimationArea/EstimationSummaryCard.js
index 94641b42..52f53043 100644
--- a/client/app/components/EstimationArea/EstimationSummaryCard.js
+++ b/client/app/components/EstimationArea/EstimationSummaryCard.js
@@ -11,10 +11,10 @@ const EstimationSummaryCard = ({t, cardCfg, count, onClick}) => {
     <StyledEstmSummCard
       data-testid={`summaryCard.${cardCfg.value}`}
       onClick={onClick}
-      clickable={true}
+      $clickable={true}
       title={t('settle', {label: cardCfg.label})}
     >
-      <StyledEstmSummCardInner wasEstimated={!!count} cardColor={cardCfg.color}>
+      <StyledEstmSummCardInner $wasEstimated={!!count} $cardColor={cardCfg.color}>
         {cardCfg.label}
         {count && <span>{count}</span>}
       </StyledEstmSummCardInner>
diff --git a/client/app/components/EstimationArea/_styled.js b/client/app/components/EstimationArea/_styled.js
index 7137aca0..2852ade9 100644
--- a/client/app/components/EstimationArea/_styled.js
+++ b/client/app/components/EstimationArea/_styled.js
@@ -14,7 +14,7 @@ export const StyledEstimation = styled.div`
 export const EstimationAreaButtons = styled.div`
   margin-top: 16px;
   display: flex;
-  justify-content: ${({alignment}) => alignment};
+  justify-content: ${({$alignment}) => $alignment};
 
   > button {
     margin-right: 4px;
@@ -45,8 +45,8 @@ export const StyledApplauseHighlight = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  border: ${({color}) => '1px solid ' + color};
-  box-shadow: ${({color}) => '0 0 10px ' + color};
+  border: ${({$color}) => '1px solid ' + $color};
+  box-shadow: ${({$color}) => '0 0 10px ' + $color};
   animation-name: ${FlashAnimation};
   animation-duration: 2s;
   animation-timing-function: linear;
@@ -96,12 +96,12 @@ export const StyledCard = styled.button`
 
 export const StyledCardInner = styled.div`
   position: relative;
-  background: ${({cardColor}) => (cardColor ? cardColor : 'white')};
-  color: ${({cardColor}) => (cardColor ? 'white' : 'inherit')};
+  background: ${({$cardColor}) => ($cardColor ? $cardColor : 'white')};
+  color: ${({$cardColor}) => ($cardColor ? 'white' : 'inherit')};
   padding: 28px 0;
   box-sizing: border-box;
   border-radius: 12px;
-  border: ${({selected}) => (selected ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
+  border: ${({$selected}) => ($selected ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
 
   &:hover {
     box-shadow: inset 0 -113px 113px -44px rgba(19, 18, 18, 0.39);
@@ -122,7 +122,7 @@ export const StyledEstmSummCard = styled(StyledCard)`
   &,
   &:focus,
   &:hover {
-    cursor: ${({clickable}) => (clickable ? 'pointer' : 'default')};
+    cursor: ${({$clickable}) => ($clickable ? 'pointer' : 'default')};
   }
 `;
 
@@ -130,8 +130,8 @@ export const StyledEstmSummCardInner = styled(StyledCardInner)`
   height: 80px; /* slightly smaller cards in estimation summary */
   padding: 23px 0;
 
-  opacity: ${({wasEstimated}) => (wasEstimated ? 1 : 0.3)};
-  border: ${({wasEstimated}) => (wasEstimated ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
+  opacity: ${({$wasEstimated}) => ($wasEstimated ? 1 : 0.3)};
+  border: ${({$wasEstimated}) => ($wasEstimated ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
 
   > span {
     display: block;
diff --git a/client/app/components/EstimationMatrix/EstimationMatrixColumn.js b/client/app/components/EstimationMatrix/EstimationMatrixColumn.js
index 18c83c27..3960c7f3 100644
--- a/client/app/components/EstimationMatrix/EstimationMatrixColumn.js
+++ b/client/app/components/EstimationMatrix/EstimationMatrixColumn.js
@@ -21,7 +21,7 @@ export const EstimationMatrixColumn = ({stories, columnWidth, cc, onStoryDropped
   }));
 
   return (
-    <StyledEMColumn ref={drop} width={columnWidth} isOver={isOver}>
+    <StyledEMColumn ref={drop} $width={columnWidth} $isOver={isOver}>
       <div>
         <ValueBadge cardValue={cc.value} />
       </div>
@@ -54,7 +54,7 @@ const EstimationMatrixStory = ({color, story}) => {
   );
 
   return (
-    <StyledEMStory ref={drag} color={color} isDragging={isDragging}>
+    <StyledEMStory ref={drag} $color={color} $isDragging={isDragging}>
       <h4>{story.title}</h4>
     </StyledEMStory>
   );
diff --git a/client/app/components/EstimationMatrix/_styled.js b/client/app/components/EstimationMatrix/_styled.js
index d4cc2568..6559a6c4 100644
--- a/client/app/components/EstimationMatrix/_styled.js
+++ b/client/app/components/EstimationMatrix/_styled.js
@@ -36,9 +36,9 @@ export const StyledEMColumn = styled.div`
   margin-top: 4px;
   padding: 0 2px;
   box-sizing: border-box;
-  width: ${({width}) => width}%;
-  background: ${({isOver}) => (isOver ? dzOverlayAcceptBg : 'transparent')};
-  border: ${({isOver}) => (isOver ? dzOverlayAcceptBorder : '4px solid transparent')};
+  width: ${({$width}) => $width}%;
+  background: ${({$isOver}) => ($isOver ? dzOverlayAcceptBg : 'transparent')};
+  border: ${({$isOver}) => ($isOver ? dzOverlayAcceptBorder : '4px solid transparent')};
 
   /** header row **/
 
@@ -65,8 +65,8 @@ export const StyledEMStory = styled.div`
   padding: 4px;
   margin: 2px 0;
   width: 100%;
-  background: ${({color}) => color};
-  opacity: ${({isDragging}) => (isDragging ? 0.2 : 1)};
+  background: ${({$color}) => $color};
+  opacity: ${({$isDragging}) => ($isDragging ? 0.2 : 1)};
   color: white;
   border-radius: 4px;
   text-align: center;
diff --git a/client/app/components/Help/Help.js b/client/app/components/Help/Help.js
index 082f6e01..329f9971 100644
--- a/client/app/components/Help/Help.js
+++ b/client/app/components/Help/Help.js
@@ -17,7 +17,7 @@ import {StyledSection} from '../common/_styled';
 const Help = ({shown}) => {
   const {t} = useContext(L10nContext);
   return (
-    <StyledHelp shown={shown}>
+    <StyledHelp $shown={shown}>
       <h4>{t('help')}</h4>
 
       <StyledHelpInner>
diff --git a/client/app/components/Help/_styled.js b/client/app/components/Help/_styled.js
index 1f6b78d7..a0a399d1 100644
--- a/client/app/components/Help/_styled.js
+++ b/client/app/components/Help/_styled.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {COLOR_BACKGROUND_GREY} from '../colors';
 
 export const StyledHelp = styled.div`
-  display: ${({shown}) => (shown ? 'block' : 'none')};
+  display: ${({$shown}) => ($shown ? 'block' : 'none')};
   -webkit-overflow-scrolling: touch;
   box-sizing: border-box;
   padding: 0 8px;
diff --git a/client/app/components/Landing/Landing.js b/client/app/components/Landing/Landing.js
index 83237b97..1aa5ceb3 100644
--- a/client/app/components/Landing/Landing.js
+++ b/client/app/components/Landing/Landing.js
@@ -42,7 +42,7 @@ const Landing = ({pendingJoin, actionLog}) => {
         <JoinRoomForm />
 
         <StyledEyecatcher>
-          <StyledInfoText small={true}>
+          <StyledInfoText $small={true}>
             <i className="icon-attention"></i>
             {t('disclaimer')}
           </StyledInfoText>
diff --git a/client/app/components/Landing/_styled.js b/client/app/components/Landing/_styled.js
index aeceec9a..36c92e94 100644
--- a/client/app/components/Landing/_styled.js
+++ b/client/app/components/Landing/_styled.js
@@ -53,7 +53,7 @@ export const StyledInfoText = styled.div`
   align-items: center;
 
   i {
-    font-size: ${({small}) => (small ? '20px' : '30px')};
+    font-size: ${({$small}) => ($small ? '20px' : '30px')};
     margin-right: 16px;
   }
 `;
diff --git a/client/app/components/Room/Board.js b/client/app/components/Room/Board.js
index 99a455bf..a3b6032d 100644
--- a/client/app/components/Room/Board.js
+++ b/client/app/components/Room/Board.js
@@ -51,7 +51,7 @@ const Board = ({roomId, isAStorySelected, sidebarShown, matrixShown, toggleMatri
       {matrixShown && <EstimationMatrix />}
     </StyledBoardCenter>
 
-    <StyledSidebarRight shown={sidebarShown}>
+    <StyledSidebarRight $shown={sidebarShown}>
       <Settings />
       <ActionLog />
       <Help />
diff --git a/client/app/components/Room/MatrixToggle.js b/client/app/components/Room/MatrixToggle.js
index dae97eac..b795e1c4 100644
--- a/client/app/components/Room/MatrixToggle.js
+++ b/client/app/components/Room/MatrixToggle.js
@@ -15,7 +15,7 @@ const MatrixToggle = ({onToggle, matrixShown}) => {
           className="pure-button"
           type="button"
           onClick={onToggle}
-          active={!matrixShown}
+          $active={!matrixShown}
           title={'Story'}
         >
           <i className="icon-list-alt" />
@@ -25,7 +25,7 @@ const MatrixToggle = ({onToggle, matrixShown}) => {
           className="pure-button"
           type="button"
           onClick={onToggle}
-          active={matrixShown}
+          $active={matrixShown}
           title={t('matrix')}
         >
           <i className="icon-table" />
diff --git a/client/app/components/Room/_styled.js b/client/app/components/Room/_styled.js
index 975ac482..bcd2ede4 100644
--- a/client/app/components/Room/_styled.js
+++ b/client/app/components/Room/_styled.js
@@ -42,7 +42,7 @@ export const StyledBoardCenter = styled.div`
 `;
 
 export const StyledSidebarRight = styled.div`
-  display: ${({shown}) => (shown ? 'block' : 'none')};
+  display: ${({$shown}) => ($shown ? 'block' : 'none')};
   position: relative;
   flex-shrink: 0;
   width: 100%;
diff --git a/client/app/components/Settings/CardConfigEditorItem.js b/client/app/components/Settings/CardConfigEditorItem.js
index 0d75f84a..cd172d79 100644
--- a/client/app/components/Settings/CardConfigEditorItem.js
+++ b/client/app/components/Settings/CardConfigEditorItem.js
@@ -21,7 +21,7 @@ const CardConfigEditorItem = ({item, isLast, isFirst, onChange, onUp, onDown, on
         />
       </StyledCCTableCell>
       <StyledCCTableCell style={{width: 'auto'}}>
-        <StyledColorBadge color={item.color} />
+        <StyledColorBadge $color={item.color} />
         <input type="text" defaultValue={item.color} onBlur={onValueChange.bind(this, 'color')} />
       </StyledCCTableCell>
       <StyledCCTableCell>
diff --git a/client/app/components/Settings/Settings.js b/client/app/components/Settings/Settings.js
index 13442d2d..77b67d65 100644
--- a/client/app/components/Settings/Settings.js
+++ b/client/app/components/Settings/Settings.js
@@ -15,7 +15,7 @@ import {getCurrentSidebarIfAny} from '../../state/ui/uiSelectors';
  * - changing settings for the room like autoReveal (affects the room and thus all users in the same room)
  */
 const Settings = ({shown}) => (
-  <StyledSettings shown={shown} data-testid="settings">
+  <StyledSettings $shown={shown} data-testid="settings">
     <form className="pure-form" onSubmit={(e) => e.preventDefault()}>
       <UserSettings />
 
diff --git a/client/app/components/Settings/UserSettings.js b/client/app/components/Settings/UserSettings.js
index 19d68a1a..1f0d1890 100644
--- a/client/app/components/Settings/UserSettings.js
+++ b/client/app/components/Settings/UserSettings.js
@@ -98,7 +98,7 @@ const UserSettings = ({user, setUsername, setEmail, setAvatar, toggleExcluded})
         <StyledAvatarGrid data-testid="avatarGrid">
           {avatarIcons.map((aIcn, index) => (
             <StyledMiniAvatar
-              selected={user.avatar === index}
+              $selected={user.avatar === index}
               src={aIcn}
               key={'aIcn_' + aIcn}
               onClick={onMiniAvatarClicked.bind(undefined, index)}
diff --git a/client/app/components/Settings/_styled.js b/client/app/components/Settings/_styled.js
index 6afc63a4..42c3d2e9 100644
--- a/client/app/components/Settings/_styled.js
+++ b/client/app/components/Settings/_styled.js
@@ -13,7 +13,7 @@ export const StyledSettings = styled.div`
   background: ${COLOR_BACKGROUND_GREY};
   box-sizing: border-box;
   padding: 0 8px;
-  display: ${({shown}) => (shown ? 'flex' : 'none')};
+  display: ${({$shown}) => ($shown ? 'flex' : 'none')};
   flex-direction: column;
   justify-content: space-between;
 
@@ -73,7 +73,7 @@ export const StyledMiniAvatar = styled.img`
   height: 32px;
   margin-right: 4px;
   border-radius: 50%;
-  border: ${({selected}) => (selected ? '2px solid ' + COLOR_ORANGE : '2px solid transparent')};
+  border: ${({$selected}) => ($selected ? '2px solid ' + COLOR_ORANGE : '2px solid transparent')};
   padding: 2px;
 
   &:hover {
@@ -143,7 +143,7 @@ export const StyledColorBadge = styled.span`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: ${({color}) => color};
+  background-color: ${({$color}) => $color};
 `;
 
 export const StyledTextarea = styled.textarea`
diff --git a/client/app/components/TopBar/TopBar.js b/client/app/components/TopBar/TopBar.js
index 6e18aeb0..f3eef540 100644
--- a/client/app/components/TopBar/TopBar.js
+++ b/client/app/components/TopBar/TopBar.js
@@ -70,7 +70,7 @@ const TopBar = ({
             className={`clickable pure-button pure-button-primary ${
               sidebar === SIDEBAR_ACTIONLOG ? 'pure-button-active' : ''
             }`}
-            warning={unseenError}
+            $warning={unseenError}
             onClick={toggleSidebar.bind(undefined, SIDEBAR_ACTIONLOG)}
             title={t('toggleLog')}
           >
diff --git a/client/app/components/TopBar/_styled.js b/client/app/components/TopBar/_styled.js
index 7e014d7d..55404ad1 100644
--- a/client/app/components/TopBar/_styled.js
+++ b/client/app/components/TopBar/_styled.js
@@ -102,7 +102,7 @@ export const StyledQuickMenuButton = styled.a`
   font-size: 22px;
   padding: 4px 8px;
   box-sizing: border-box;
-  color: ${({warning}) => (warning ? COLOR_WARNING : 'white')};
+  color: ${({$warning}) => ($warning ? COLOR_WARNING : 'white')};
   border-radius: 0;
   background: ${COLOR_BLUE};
   position: relative;
diff --git a/client/app/components/Users/User.js b/client/app/components/Users/User.js
index 7c8a5ff7..ee4ea8e1 100644
--- a/client/app/components/Users/User.js
+++ b/client/app/components/Users/User.js
@@ -43,7 +43,7 @@ const User = ({
   const [quickMenuShown, setQuickMenuShown] = useState(false);
 
   return (
-    <StyledUser data-testid="user" isOwn={isOwnUser} shaded={isDisconnected || quickMenuShown}>
+    <StyledUser data-testid="user" $isOwn={isOwnUser} $shaded={isDisconnected || quickMenuShown}>
       <StyledUserBadge>
         {isExcluded && <i className="icon-eye"></i>}
         {isDisconnected && <i className="icon-flash"></i>}
@@ -60,7 +60,7 @@ const User = ({
       {quickMenuShown && (
         <StyledUserQuickMenu ref={quickMenuRef}>
           <StyledEyeIcon
-            active={isExcluded}
+            $active={isExcluded}
             className="icon-eye"
             onClick={onEyeIconClick}
             title={t('markSpectator')}
diff --git a/client/app/components/Users/UserEstimationCard.js b/client/app/components/Users/UserEstimationCard.js
index c00dd06a..afe47b40 100644
--- a/client/app/components/Users/UserEstimationCard.js
+++ b/client/app/components/Users/UserEstimationCard.js
@@ -31,7 +31,7 @@ const UserEstimationCard = ({
 
   if (!userHasEstimation) {
     return (
-      <StyledUserEstimation revealed={revealed}>
+      <StyledUserEstimation $revealed={revealed}>
         <span>{estimationValueToDisplay}</span>
       </StyledUserEstimation>
     );
@@ -43,8 +43,8 @@ const UserEstimationCard = ({
 
   return (
     <StyledUserEstimationGiven
-      revealed={revealed}
-      valueColor={matchingCardConfig.color}
+      $revealed={revealed}
+      $valueColor={matchingCardConfig.color}
       data-testid={`${revealed ? 'revealed.' : ''}userEstimationGiven.${matchingCardConfig.value}`}
     >
       {showHighConfMarker && (
diff --git a/client/app/components/Users/_styled.js b/client/app/components/Users/_styled.js
index 801320ad..0a8840d2 100644
--- a/client/app/components/Users/_styled.js
+++ b/client/app/components/Users/_styled.js
@@ -20,7 +20,7 @@ export const StyledUser = styled.div`
   margin-bottom: 4px;
 
   position: relative;
-  color: ${({isOwn, shaded}) => (shaded ? COLOR_LIGHT_GREY : isOwn ? COLOR_ORANGE : 'inherit')};
+  color: ${({$isOwn, $shaded}) => ($shaded ? COLOR_LIGHT_GREY : $isOwn ? COLOR_ORANGE : 'inherit')};
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -52,8 +52,8 @@ export const StyledUserBadge = styled.span`
 
 export const StyledUserEstimation = styled.div`
   box-sizing: border-box;
-  border: ${({revealed}) =>
-    revealed ? '2px solid  ' + COLOR_LIGHTER_GREY : '2px dashed ' + COLOR_LIGHTER_GREY};
+  border: ${({$revealed}) =>
+    $revealed ? '2px solid  ' + COLOR_LIGHTER_GREY : '2px dashed ' + COLOR_LIGHTER_GREY};
   background: transparent;
   color: ${COLOR_LIGHT_GREY};
   font-family: ${ZuehlkeFont};
@@ -86,8 +86,8 @@ export const StyledUserEstimation = styled.div`
 export const StyledUserEstimationGiven = styled(StyledUserEstimation)`
   position: relative;
   border: 4px solid white;
-  color: ${({revealed}) => (revealed ? 'white' : COLOR_LIGHTER_GREY)};
-  background: ${({revealed, valueColor}) => (revealed ? valueColor : COLOR_LIGHT_GREY)};
+  color: ${({$revealed}) => ($revealed ? 'white' : COLOR_LIGHTER_GREY)};
+  background: ${({$revealed, $valueColor}) => ($revealed ? $valueColor : COLOR_LIGHT_GREY)};
 
   > i {
     font-size: small;
@@ -112,7 +112,7 @@ export const StyledUserEstimationExcluded = styled(StyledUserEstimation)`
 `;
 
 export const StyledEyeIcon = styled.i`
-  color: ${({active}) => (active ? COLOR_ORANGE : COLOR_LIGHT_GREY)};
+  color: ${({$active}) => ($active ? COLOR_ORANGE : COLOR_LIGHT_GREY)};
 `;
 
 export const StyledUserQuickMenu = styled.span`
diff --git a/client/app/components/common/Avatar.js b/client/app/components/common/Avatar.js
index be0b79a5..10f75623 100644
--- a/client/app/components/common/Avatar.js
+++ b/client/app/components/common/Avatar.js
@@ -9,8 +9,8 @@ const Avatar = ({user, isOwn, shaded, onClick}) => (
   <StyledAvatar
     className="avatar"
     src={getImageSource(user)}
-    isOwn={isOwn}
-    shaded={shaded}
+    $isOwn={isOwn}
+    $shaded={shaded}
     onClick={onClick}
   />
 );
diff --git a/client/app/components/common/StoryDescription.js b/client/app/components/common/StoryDescription.js
index c2841985..2653bae0 100644
--- a/client/app/components/common/StoryDescription.js
+++ b/client/app/components/common/StoryDescription.js
@@ -34,7 +34,7 @@ const StoryDescription = ({
 
   return (
     <React.Fragment>
-      <StyledStoryText md={markdownEnabled} scroll={scroll} data-testid="storyText">
+      <StyledStoryText $md={markdownEnabled} $scroll={scroll} data-testid="storyText">
         {markdownEnabled && (
           <ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]}>
             {descriptionString}
@@ -65,7 +65,7 @@ const StoryDescription = ({
       {showMarkdownToggle && originalDescriptionLength > 0 && (
         <StyledToggleIcon
           data-testid="markdownToggleButton"
-          on={markdownEnabled ? '1' : ''}
+          $on={markdownEnabled ? '1' : ''}
           className="icon-markdown"
           onClick={toggleMarkdownEnabled}
         ></StyledToggleIcon>
diff --git a/client/app/components/common/ValueBadge.js b/client/app/components/common/ValueBadge.js
index 43a8bf99..b9922af3 100644
--- a/client/app/components/common/ValueBadge.js
+++ b/client/app/components/common/ValueBadge.js
@@ -6,7 +6,10 @@ import {StyledValueBadge} from './_styled';
 import {getMatchingCardConfig} from '../../state/room/roomSelectors';
 
 const ValueBadge = ({cardConfigItem}) => (
-  <StyledValueBadge cardColor={cardConfigItem && cardConfigItem.color} data-testid="cardValueBadge">
+  <StyledValueBadge
+    $cardColor={cardConfigItem && cardConfigItem.color}
+    data-testid="cardValueBadge"
+  >
     <div>{cardConfigItem.label}</div>
   </StyledValueBadge>
 );
diff --git a/client/app/components/common/_styled.js b/client/app/components/common/_styled.js
index c235aea0..daec8301 100644
--- a/client/app/components/common/_styled.js
+++ b/client/app/components/common/_styled.js
@@ -4,12 +4,12 @@ import {COLOR_FONT_GREY, COLOR_LIGHT_GREY, COLOR_LIGHTER_GREY, COLOR_ORANGE} fro
 import {device, ZuehlkeFont} from '../dimensions';
 
 export const StyledAvatar = styled.img`
-  border: ${({isOwn}) => (isOwn ? '2px solid ' + COLOR_ORANGE : '2px solid ' + COLOR_LIGHT_GREY)};
+  border: ${({$isOwn}) => ($isOwn ? '2px solid ' + COLOR_ORANGE : '2px solid ' + COLOR_LIGHT_GREY)};
   border-radius: 50%;
   background: #fff;
   display: block;
-  filter: ${({shaded}) => (shaded ? 'grayscale(100%)' : 'none')};
-  opacity: ${({shaded}) => (shaded ? '0.3' : '1')};
+  filter: ${({$shaded}) => ($shaded ? 'grayscale(100%)' : 'none')};
+  opacity: ${({$shaded}) => ($shaded ? '0.3' : '1')};
 
   /* smaller avatar icons in mobile view */
   margin: 0;
@@ -32,7 +32,7 @@ export const StyledValueBadge = styled.div`
   border-radius: 50%;
   margin-left: 8px;
   flex-shrink: 0;
-  background: ${({cardColor}) => (cardColor ? cardColor : COLOR_LIGHTER_GREY)};
+  background: ${({$cardColor}) => ($cardColor ? $cardColor : COLOR_LIGHTER_GREY)};
   justify-content: center;
   align-items: center;
 
@@ -97,16 +97,16 @@ export const StyledDropdown = styled.div`
 
 export const StyledStoryText = styled.div`
   margin-top: 4px;
-  white-space: ${({md}) => (md ? 'inherit' : 'pre-wrap')};
+  white-space: ${({$md}) => ($md ? 'inherit' : 'pre-wrap')};
   display: inline-block;
-  overflow-x: ${({scroll}) => (scroll ? 'auto' : 'hidden')};
+  overflow-x: ${({$scroll}) => ($scroll ? 'auto' : 'hidden')};
   width: 100%;
   position: relative;
 `;
 
 export const StyledToggleIcon = styled.i`
   display: inline-block;
-  color: ${({on}) => (on ? COLOR_ORANGE : 'inherit')};
+  color: ${({$on}) => ($on ? COLOR_ORANGE : 'inherit')};
   cursor: pointer;
   position: absolute;
   bottom: 16px;
@@ -133,10 +133,10 @@ export const StyledToggleButtonGroup = styled.div`
 export const StyledToggleButton = styled.button`
   padding: 4px 8px;
   font-size: small;
-  box-shadow: ${({active}) => (active ? 'none' : 'inherit')};
-  color: ${({active}) => (active ? '#fff' : COLOR_FONT_GREY)};
-  background: ${({active}) => (active ? COLOR_ORANGE : '#e6e6e6')};
-  border-right: ${({active}) => (active ? '1px solid transparent' : '1px solid rgba(0,0,0,.2)')};
+  box-shadow: ${({$active}) => ($active ? 'none' : 'inherit')};
+  color: ${({$active}) => ($active ? '#fff' : COLOR_FONT_GREY)};
+  background: ${({$active}) => ($active ? COLOR_ORANGE : '#e6e6e6')};
+  border-right: ${({$active}) => ($active ? '1px solid transparent' : '1px solid rgba(0,0,0,.2)')};
 `;
 
 export const StyledSection = styled.div`