feat: theme + ux overhaul (#6520)

* feat: theme + ux overhaul * chore: moved @opencollection/types at root of monorepo * chore: fixed review comments * chore: addressed review comments * chore: fix playwright tests --------- Co-authored-by: Bijin A B <bijin@usebruno.com>
2026-07-09 06:55:03 +00:00 · 2025-12-27 13:52:20 +05:30
parent 84f572fa88
commit f40e4d2d79
127 changed files with 10380 additions and 1437 deletions
--- a/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  .main-content {
@@ -67,7 +68,7 @@ const StyledWrapper = styled.div`
      color: ${(props) => props.theme.colors.text.green};

      &:hover {
-        background: ${(props) => props.theme.colors.text.green}1A;
+        background-color: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
      }
    }

@@ -75,7 +76,7 @@ const StyledWrapper = styled.div`
      color: ${(props) => props.theme.colors.text.danger};

      &:hover {
-        background: ${(props) => props.theme.colors.text.danger}1A;
+        background-color: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
      }
    }
  }
@@ -93,21 +94,6 @@ const StyledWrapper = styled.div`
    min-width: 140px;
  }

-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    transition: background 0.15s;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-    }
-  }
-
  .tab-content {
    flex: 1;
    overflow: hidden;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
@@ -88,7 +88,7 @@ const StyledWrapper = styled.div`
    width: 52px;
    height: 52px;
    border-radius: 8px;
-    background: ${(props) => props.theme.workspace.card.bg};
+    background: ${(props) => props.theme.background.mantle};
    border: 1px solid ${(props) => props.theme.workspace.border};
    color: ${(props) => props.theme.colors.text.muted};
    margin-bottom: 16px;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
@@ -8,6 +8,7 @@ import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 import { IconFileText, IconEdit, IconX } from '@tabler/icons';
+import Button from 'ui/Button';
 import toast from 'react-hot-toast';

 const WorkspaceDocs = ({ workspace }) => {
@@ -113,9 +114,9 @@ const WorkspaceDocs = ({ workspace }) => {
              <li>Key workflows</li>
              <li>Resources & FAQs</li>
            </ul>
-            <button className="add-docs-btn" onClick={handleAddDocumentation}>
+            <Button color="secondary" size="md" onClick={handleAddDocumentation}>
              Add Documentation
-            </button>
+            </Button>
          </div>
        )}
      </div>
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
  .table-container {
    overflow-y: auto;
    border-radius: 8px;
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
  }

  table {
@@ -45,8 +45,8 @@ const Wrapper = styled.div`
      
      td {
        padding: 5px 10px !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: solid 1px ${(props) => props.theme.border.border0};
        
        &:last-child {
          border-right: none;
@@ -63,8 +63,8 @@ const Wrapper = styled.div`
        }
        
        td {
-          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+          border-bottom: solid 1px ${(props) => props.theme.border.border0};
+          border-right: solid 1px ${(props) => props.theme.border.border0};
          
          &:last-child {
            border-right: none;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  display: flex;
@@ -174,7 +175,7 @@ const StyledWrapper = styled.div`
    }
    
    &.active {
-      background: ${(props) => props.theme.workspace.environments.activeBg};
+      background: ${(props) => props.theme.background.surface0};
      color: ${(props) => props.theme.text};
    }
    
@@ -250,19 +251,18 @@ const StyledWrapper = styled.div`
        transition: all 0.15s ease;
        
        &.save {
-          color: ${(props) => props.theme.textLink};
+          color: ${(props) => props.theme.colors.text.green};
          
          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
+            background: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
          }
        }
        
        &.cancel {
-          color: ${(props) => props.theme.colors.text.muted};
+          color: ${(props) => props.theme.colors.text.danger};
          
          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-            color: ${(props) => props.theme.text};
+            background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
          }
        }
      }
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
@@ -11,8 +11,7 @@ const StyledWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
-    justify-content: center;
-    flex: 1;
+    padding-top: 10%;
    color: ${(props) => props.theme.colors.text.muted};
    
    svg {
@@ -32,22 +31,6 @@ const StyledWrapper = styled.div`
      gap: 8px;
    }
  }
-  
-  .shared-button {
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 5px;
-    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: ${(props) => props.theme.sidebar.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: all 0.1s ease;
-    
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
@@ -6,18 +6,19 @@ import StyledWrapper from './StyledWrapper';
 import { IconFileAlert } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
+import Button from 'ui/Button';

 const DefaultTab = ({ setTab }) => (
  <div className="empty-state">
    <IconFileAlert size={48} strokeWidth={1.5} />
    <div className="title">No Environments</div>
    <div className="actions">
-      <button className="shared-button" onClick={() => setTab('create')}>
+      <Button size="sm" color="secondary" onClick={() => setTab('create')}>
        Create Environment
-      </button>
-      <button className="shared-button" onClick={() => setTab('import')}>
+      </Button>
+      <Button size="sm" color="secondary" onClick={() => setTab('import')}>
        Import Environment
-      </button>
+      </Button>
    </div>
  </div>
 );
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js
@@ -97,25 +97,6 @@ const StyledWrapper = styled.div`
  .collection-dropdown {
    min-width: 120px;
  }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-    }
-
-    &.dropdown-item-danger {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js
@@ -288,7 +288,7 @@ const CollectionsList = ({ workspace }) => {
                      <span>Share</span>
                    </div>
                    <div
-                      className="dropdown-item dropdown-item-danger"
+                      className="dropdown-item delete-item"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleRemoveCollection(collection);
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
@@ -6,6 +6,7 @@ import toast from 'react-hot-toast';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import ImportCollection from 'components/Sidebar/ImportCollection';
 import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation';
+import Button from 'ui/Button';
 import CollectionsList from './CollectionsList';
 import WorkspaceDocs from '../WorkspaceDocs';
 import StyledWrapper from './StyledWrapper';
@@ -107,18 +108,30 @@ const WorkspaceOverview = ({ workspace }) => {
          <div className="quick-actions-section">
            <div className="section-title">Quick Actions</div>
            <div className="quick-actions-buttons">
-              <button className="quick-action-btn" onClick={handleCreateCollection}>
-                <IconPlus size={14} strokeWidth={1.5} />
-                <span>Create Collection</span>
-              </button>
-              <button className="quick-action-btn" onClick={handleOpenCollection}>
-                <IconFolder size={14} strokeWidth={1.5} />
-                <span>Open Collection</span>
-              </button>
-              <button className="quick-action-btn" onClick={handleImportCollection}>
-                <IconDownload size={14} strokeWidth={1.5} />
-                <span>Import Collection</span>
-              </button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconPlus size={14} strokeWidth={1.5} />}
+                onClick={handleCreateCollection}
+              >
+                Create Collection
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconFolder size={14} strokeWidth={1.5} />}
+                onClick={handleOpenCollection}
+              >
+                Open Collection
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconDownload size={14} strokeWidth={1.5} />}
+                onClick={handleImportCollection}
+              >
+                Import Collection
+              </Button>
            </div>
          </div>