Fix text colors and visibility throughout app (#19)

2023-12-21 14:59:33 +05:30 · 2023-12-21 14:59:33 +05:30 · 3133fb989f
commit 3133fb989f
parent 2650fa8867
15 changed files with 101 additions and 61 deletions
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/packages/frontend/src/components/Sidebar.tsx
@ -1,6 +1,8 @@
 import React from 'react';
 import { Link, NavLink } from 'react-router-dom';

+import { Card, CardBody, Typography } from '@material-tailwind/react';
+
 const Sidebar = () => {
  return (
    <div className="flex flex-col h-full p-4">
@ -10,13 +12,17 @@ const Sidebar = () => {
            <h3 className="text-black text-2xl">Snowball</h3>
          </Link>
        </div>
-        <div>Organization</div>
+        <Card className="-ml-1 my-2">
+          <CardBody className="p-1 py-2">
+            <Typography>Organization</Typography>
+          </CardBody>
+        </Card>
        <div>
          <NavLink
            to="/"
            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
          >
-            Projects
+            <Typography>Projects</Typography>
          </NavLink>
        </div>
        <div>
@ -24,7 +30,7 @@ const Sidebar = () => {
            to="/settings"
            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
          >
-            Settings
+            <Typography>Settings</Typography>
          </NavLink>
        </div>
      </div>
--- a/packages/frontend/src/components/projects/ProjectCard.tsx
+++ b/packages/frontend/src/components/projects/ProjectCard.tsx
@ -6,6 +6,7 @@ import {
  MenuHandler,
  MenuList,
  MenuItem,
+  Typography,
 } from '@material-tailwind/react';

 import { relativeTime } from '../../utils/time';
@ -21,10 +22,12 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
      <div className="flex gap-2 p-2 items-center">
        <div>{project.icon}</div>
        <div className="grow">
-          <Link to={`projects/${project.id}`} className="text-sm text-gray-700">
-            {project.name}
+          <Link to={`projects/${project.id}`}>
+            <Typography>{project.name}</Typography>
+            <Typography color="gray" variant="small">
+              {project.domain}
+            </Typography>
          </Link>
-          <p className="text-sm text-gray-400">{project.domain}</p>
        </div>
        <Menu placement="bottom-end">
          <MenuHandler>
@ -36,12 +39,14 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
          </MenuList>
        </Menu>
      </div>
-      <div className="border-slate-200 border-t-2 border-solid p-4 text-gray-500 text-xs">
-        <p>{project.latestCommit.message}</p>
-        <p>
+      <div className="border-slate-200 border-t-2 border-solid p-4 bg-gray-50">
+        <Typography variant="small" color="gray">
+          {project.latestCommit.message}
+        </Typography>
+        <Typography variant="small" color="gray">
          {relativeTime(project.latestCommit.createdAt)} on{' '}
          {project.latestCommit.branch}
-        </p>
+        </Typography>
      </div>
    </div>
  );
--- a/packages/frontend/src/components/projects/ProjectSearch.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearch.tsx
@ -57,12 +57,16 @@ const ProjectSearch = ({ onChange }: ProjectsSearchProps) => {
    <div className="relative">
      <SearchBar {...getInputProps()} />
      <Card
-        className={`absolute w-1/2 max-h-100 overflow-y-scroll ${
+        className={`absolute w-1/2 max-h-100 -mt-1 overflow-y-scroll ${
          !(isOpen && items.length) && 'hidden'
        }`}
      >
-        <p>Suggestions</p>
        <List {...getMenuProps()}>
+          <div className="p-3">
+            <Typography variant="small" color="gray">
+              Suggestions
+            </Typography>
+          </div>
          {items.map((item, index) => (
            <ListItem
              selected={highlightedIndex === index || selectedItem === item}
--- a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
+++ b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
@ -16,7 +16,7 @@ interface ProjectRepoCardProps {

 const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
  return (
-    <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 m-2">
+    <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer">
      <div>^</div>
      <div className="grow">
        <p className="text-black">
--- a/packages/frontend/src/components/projects/create/RepositoryList.tsx
+++ b/packages/frontend/src/components/projects/create/RepositoryList.tsx
@ -38,7 +38,7 @@ const RepositoryList = () => {

  return (
    <div className="p-4">
-      <div className="flex gap-2">
+      <div className="flex gap-2 mb-2">
        <div className="basis-1/3">
          <Select
            value={selectedUser}
@ -73,7 +73,6 @@ const RepositoryList = () => {
            <Typography>No repository found</Typography>
            <Button
              className="rounded-full mt-5"
-              color="white"
              size="sm"
              onClick={handleResetFilters}
            >
--- a/packages/frontend/src/components/projects/create/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import { IconButton } from '@material-tailwind/react';
+import { IconButton, Typography } from '@material-tailwind/react';

 import { Link } from 'react-router-dom';

@ -15,13 +15,15 @@ interface TemplateCardProps {
 const TemplateCard: React.FC<TemplateCardProps> = ({ framework }) => {
  return (
    <Link to={'/projects/create/template'}>
-      <div className="h-14 group bg-gray-200 text-gray-500 text-xs border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-        <div className="grow">
-          {framework.icon}
-          {framework.framework}
-        </div>
+      <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
+        <Typography className="grow">
+          {framework.icon} {framework.framework}
+        </Typography>
        <div>
-          <IconButton size="sm" className="hidden group-hover:block">
+          <IconButton
+            size="sm"
+            className="rounded-full hidden group-hover:block"
+          >
            {'>'}
          </IconButton>
        </div>
--- a/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
+++ b/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';

-import { Collapse, Button } from '@material-tailwind/react';
+import { Collapse, Button, Typography } from '@material-tailwind/react';

 import { Stopwatch, setStopWatchOffset } from '../../../../StopWatch';
 import FormatMillisecond from '../../../../FormatMilliSecond';
@ -61,7 +61,11 @@ const DeployStep = ({
      <Collapse open={collapse}>
        <div className="p-2 text-sm text-gray-500 h-36 overflow-y-scroll">
          {processLogs.map((log, key) => {
-            return <div key={key}>{log}</div>;
+            return (
+              <Typography variant="small" color="gray" key={key}>
+                {log}
+              </Typography>
+            );
          })}
          <div className="sticky bottom-0 left-1/2 flex justify-center">
            <Button
--- a/packages/frontend/src/components/projects/project/ActivityCard.tsx
+++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx
@ -1,5 +1,7 @@
 import React from 'react';

+import { Typography } from '@material-tailwind/react';
+
 import { relativeTime } from '../../../utils/time';

 interface ActivityDetails {
@ -19,12 +21,14 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
    <div className="flex hover:bg-gray-200 rounded mt-1">
      <div className="w-4">{activity.authorAvatar}</div>

-      <div className="grow text-sm text-gray-500">
-        <p className="text-black">{activity.author}</p>
-        <p className="text-xs">
+      <div className="grow">
+        <Typography>{activity.author}</Typography>
+        <Typography variant="small" color="gray">
          {relativeTime(activity.createdAt)} ^ {activity.branch}
-        </p>
-        <p>{activity.message}</p>
+        </Typography>
+        <Typography variant="small" color="gray">
+          {activity.message}
+        </Typography>
      </div>
    </div>
  );
--- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
@ -1,5 +1,7 @@
 import React from 'react';

+import { Typography } from '@material-tailwind/react';
+
 import ActivityCard from './ActivityCard';
 import activityDetails from '../../../assets/activities.json';
 import { ProjectDetails } from '../../../types/project';
@ -15,8 +17,10 @@ const OverviewTabPanel = ({ project }: OverviewProps) => (
      <div className="flex items-center gap-2 p-2 ">
        <div>^</div>
        <div className="grow">
-          <p className="text-sm text-gray-700">{project.title}</p>
-          <p className="text-sm text-gray-400">{project.domain}</p>
+          <Typography>{project.name}</Typography>
+          <Typography variant="small" color="gray">
+            {project.domain}
+          </Typography>
        </div>
      </div>
      <div className="flex justify-between p-2 text-sm">
@ -25,22 +29,22 @@ const OverviewTabPanel = ({ project }: OverviewProps) => (
      </div>
      <div className="flex justify-between p-2 text-sm">
        <p>Source</p>
-        <p>{project.source}</p>
+        <p>^ {project.source}</p>
      </div>
      <div className="flex justify-between p-2 text-sm">
        <p>deployment</p>
-        <p>{project.deployment}</p>
+        <p>{project.deployment} ^</p>
      </div>
      <div className="flex justify-between p-2 text-sm">
        <p>Created</p>
        <p>
-          {relativeTime(project.createdAt)} by {project.createdBy}
+          {relativeTime(project.createdAt)} by ^ {project.createdBy}
        </p>
      </div>
    </div>
    <div className="col-span-2 p-2">
      <div className="flex justify-between">
-        <p>Activity</p>
+        <Typography variant="h6">Activity</Typography>
        <button className="text-xs bg-gray-300 rounded-full p-2">
          See all
        </button>
--- a/packages/frontend/src/components/projects/project/ProjectTabs.tsx
+++ b/packages/frontend/src/components/projects/project/ProjectTabs.tsx
@ -35,7 +35,7 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => {
        'border-b-2 border-gray-900 text-gray-900 focus:outline-none'
      }
    >
-      <TabList className="flex border-b border-gray-300 text-gray-400">
+      <TabList className="flex border-b border-gray-300 text-gray-600">
        <Tab className={'p-2 cursor-pointer'}>Overview</Tab>
        <Tab className={'p-2 cursor-pointer'}>Deployments</Tab>
        <Tab className={'p-2 cursor-pointer'}>Database</Tab>
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@ -5,6 +5,7 @@ import {
  MenuHandler,
  MenuList,
  MenuItem,
+  Typography,
 } from '@material-tailwind/react';

 import { relativeTime } from '../../../../utils/time';
@ -28,24 +29,26 @@ interface DeployDetailsCardProps {

 const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => {
  return (
-    <div className="grid grid-cols-4 gap-2 text-sm text-gray-600 border-b border-gray-300">
+    <div className="grid grid-cols-4 gap-2 border-b border-gray-300">
      <div className="col-span-2">
        <div className="flex">
-          <p className=" text-gray-900 basis-2/3">{deployment.title}</p>
-          <p className="basis-1/3">{deployment.status}</p>
+          <Typography className=" basis-2/3">{deployment.title}</Typography>
+          <Typography color="gray" className="basis-1/3">
+            {deployment.status}
+          </Typography>
        </div>
-        <p>{deployment.environment}</p>
+        <Typography color="gray">{deployment.environment}</Typography>
      </div>
      <div className="col-span-1">
-        <p>{deployment.branch}</p>
-        <p>
-          {deployment.commit.hash} {deployment.commit.message}
-        </p>
+        <Typography color="gray">^ {deployment.branch}</Typography>
+        <Typography color="gray">
+          ^ {deployment.commit.hash} {deployment.commit.message}
+        </Typography>
      </div>
      <div className="col-span-1 flex items-center">
-        <p className="grow">
+        <Typography color="gray" className="grow">
          {relativeTime(deployment.updatedAt)} ^ {deployment.author}
-        </p>
+        </Typography>
        <Menu placement="bottom-start">
          <MenuHandler>
            <button className="self-start">...</button>
--- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
@ -2,8 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import toast, { Toaster } from 'react-hot-toast';

-import { Button } from '@material-tailwind/react';
-import { Input } from '@material-tailwind/react';
+import { Button, Typography, Input } from '@material-tailwind/react';

 const PROJECT_ID = '62f87575-7a2b-4951-8156-9f9821j380d';

@ -32,7 +31,7 @@ const GeneralTabPanel = () => {
  return (
    <form onSubmit={handleSubmit(() => {})}>
      <div className="mb-4">
-        <h4>Project info</h4>
+        <Typography variant="h6">Project info</Typography>
      </div>
      <div className="my-2 w-3/5">
        <label
--- a/packages/frontend/src/pages/Projects.tsx
+++ b/packages/frontend/src/pages/Projects.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';

-import { Button } from '@material-tailwind/react';
+import { Button, IconButton, Typography } from '@material-tailwind/react';

 import ProjectCard from '../components/projects/ProjectCard';
 import HorizontalLine from '../components/HorizontalLine';
@ -12,17 +12,23 @@ const Projects = () => {
  return (
    <div className="bg-white rounded-3xl h-full">
      <div className="flex p-4">
-        <div className="grow">
+        <div className="grow mr-2">
          <ProjectSearch onChange={() => {}} />
        </div>
-        <div className="text-gray-300">^</div>
-        <div className="text-gray-300">^</div>
-        <div className="text-gray-300">^</div>
+        <IconButton color="blue" className="rounded-full mr-2">
+          <Typography variant="h5">+</Typography>
+        </IconButton>
+        <div className="mr-2 flex items-center">
+          <Typography>^</Typography>
+        </div>
+        <div className="px-2 py-1 bg-blue-gray-50 rounded-lg">
+          <Typography variant="lead">SY</Typography>
+        </div>
      </div>
      <HorizontalLine />
      <div className="flex p-4">
        <div className="grow">
-          <h3 className="text-gray-750 text-2xl">Projects</h3>
+          <Typography variant="h4">Projects</Typography>
        </div>
        <div>
          {/* TODO: Create button component */}
--- a/packages/frontend/src/pages/projects/Project.tsx
+++ b/packages/frontend/src/pages/projects/Project.tsx
@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

-import { Button } from '@material-tailwind/react';
+import { Button, Typography } from '@material-tailwind/react';

 import HorizontalLine from '../../components/HorizontalLine';
 import projects from '../../assets/projects.json';
@ -22,7 +22,7 @@ const Project = () => {
    <div className="bg-white rounded-3xl h-full">
      {project ? (
        <>
-          <div className="flex p-4 gap-4">
+          <div className="flex p-4 gap-4 items-center">
            <Button
              variant="outlined"
              className="rounded-full"
@ -30,7 +30,9 @@ const Project = () => {
            >
              {'<'}
            </Button>
-            <h3 className="grow">{project?.title} </h3>
+            <Typography variant="h3" className="grow">
+              {project?.title}
+            </Typography>
            <Button className="rounded-full" variant="outlined">
              Open Repo
            </Button>
--- a/packages/frontend/src/pages/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/projects/create/template/index.tsx
@ -2,6 +2,8 @@ import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { Link } from 'react-router-dom';

+import { Typography } from '@material-tailwind/react';
+
 import Dropdown from '../../../../components/Dropdown';

 const USER_OPTIONS = [
@ -23,10 +25,10 @@ const CreateRepo = () => {
  return (
    <form onSubmit={handleSubmit(() => {})}>
      <div className="mb-2">
-        <h3>Create a repository</h3>
-        <p className="text-sm text-gray-400">
+        <Typography variant="h6">Create a repository</Typography>
+        <Typography color="gray">
          The project will be cloned into this repository
-        </p>
+        </Typography>
      </div>
      <div className="mb-2">
        <h5>Framework</h5>