From d00816c6b215ec08aaacb2e7cb5e61fe26e9eab1 Mon Sep 17 00:00:00 2001
From: adityagarg06 <adityagarg2003@gmail.com>
Date: Thu, 28 Dec 2023 23:27:20 +0530
Subject: [PATCH 1/2] Use styled-components in CollectionListRow

---
 .../CollectionList/CollectionListRow.jsx      | 82 ++++++++++++++++++-
 client/theme.js                               |  9 ++
 2 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index dafbe21517..c4f57fedca 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import styled from 'styled-components';
 import MenuItem from '../../../../components/Dropdown/MenuItem';
 import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
@@ -11,7 +12,80 @@ import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
+import { remSize, prop } from '../../../../theme';
 
+const SketchsTableRow = styled.tr`
+  &&& {
+    margin: ${remSize(10)};
+    height: ${remSize(72)};
+    font-size: ${remSize(16)};
+  }
+  &:nth-child(odd) {
+    background: ${prop('tableRowStripeColor')};
+  }
+
+  > th:nth-child(1) {
+    padding-left: ${remSize(12)};
+  }
+
+  > td {
+    padding-left: ${remSize(8)};
+  }
+
+  a {
+    color: ${prop('primaryTextColor')};
+  }
+
+  &.is-deleted > * {
+    font-style: italic;
+  }
+  @media (max-width: 770px) {
+    &&& {
+      margin: 0;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      padding: ${remSize(15)};
+      height: fit-content;
+      gap: ${remSize(8)};
+      border: 1px solid ${prop('modalBorderColor')};
+      background-color: ${prop('searchBackgroundColor')};
+      > th {
+        padding-left: 0;
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: ${remSize(6)};
+      }
+      > td {
+        padding-left: 0;
+        width: 30%;
+        font-size: ${remSize(14)};
+        color: ${prop('modalBorderColor')};
+      }
+    }
+  }
+`;
+const SketchesTableName = styled.span`
+  &&& {
+    display: flex;
+    align-items: center;
+  }
+`;
+const SketchlistDropdownColumn = styled.td`
+  &&& {
+    position: relative;
+    width: ${remSize(60)};
+  }
+  @media (max-width: 770px) {
+    &&& {
+      position: absolute;
+      top: 0;
+      right: ${remSize(4)};
+      width: auto !important;
+      margin: ${remSize(8)};
+    }
+  }
+`;
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -126,9 +200,9 @@ const CollectionListRowBase = (props) => {
   const { collection, mobile } = props;
 
   return (
-    <tr className="sketches-table__row" key={collection.id}>
+    <SketchsTableRow key={collection.id}>
       <th scope="row">
-        <span className="sketches-table__name">{renderCollectionName()}</span>
+        <SketchesTableName>{renderCollectionName()}</SketchesTableName>
       </th>
       <td>{formatDateCell(collection.createdAt, mobile)}</td>
       <td>{formatDateCell(collection.updatedAt, mobile)}</td>
@@ -136,8 +210,8 @@ const CollectionListRowBase = (props) => {
         {mobile && 'sketches: '}
         {(collection.items || []).length}
       </td>
-      <td className="sketch-list__dropdown-column">{renderActions()}</td>
-    </tr>
+      <SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
+    </SketchsTableRow>
   );
 };
 
diff --git a/client/theme.js b/client/theme.js
index f60ef0735a..76a5bdc5a9 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -75,6 +75,9 @@ const baseThemes = {
     inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
     accentColor: colors.p5jsPink,
+    modalBorderColor: grays.middleLight,
+    searchBackgroundColor: grays.lightest,
+    tableRowStripeColor: grays.mediumLight,
 
     Button: {
       primary: {
@@ -162,6 +165,9 @@ const baseThemes = {
     inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
     accentColor: colors.p5jsPink,
+    modalBorderColor: grays.middleDark,
+    searchBackgroundColor: grays.darker,
+    tableRowStripeColor: grays.dark,
 
     Button: {
       primary: {
@@ -248,6 +254,9 @@ export default {
   ...baseThemes,
   [Theme.contrast]: extend(baseThemes[Theme.dark], {
     inactiveTextColor: grays.light,
+    modalBorderColor: grays.middleDark,
+    searchBackgroundColor: grays.darker,
+    tableRowStripeColor: grays.dark,
 
     Button: {
       primary: {

From 7aeb2eb19527406e4b3f443734f7f54039a345d2 Mon Sep 17 00:00:00 2001
From: adityagarg06 <adityagarg2003@gmail.com>
Date: Fri, 29 Dec 2023 08:43:11 +0530
Subject: [PATCH 2/2] Removed necessary theme colors

---
 client/theme.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/theme.js b/client/theme.js
index 76a5bdc5a9..106ed3c4e8 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -254,9 +254,6 @@ export default {
   ...baseThemes,
   [Theme.contrast]: extend(baseThemes[Theme.dark], {
     inactiveTextColor: grays.light,
-    modalBorderColor: grays.middleDark,
-    searchBackgroundColor: grays.darker,
-    tableRowStripeColor: grays.dark,
 
     Button: {
       primary: {