[chore] Styling of Project Modal (w/o KDMs) #45
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| 'use client'; | ||
|
|
||
| import React, { useEffect, useState } from 'react'; | ||
| import { FiX, FiZap } from 'react-icons/fi'; | ||
| import { queryProjectbyId } from '../../api/supabase/queries/query'; | ||
| import * as texts from '../../styles/texts'; | ||
| import { Project } from '../../types/schema'; | ||
| import * as styles from './styles'; | ||
|
There was a problem hiding this comment. If possible, I think we should import all of the styled components individually as their names instead of as styles so that we don't have to start everything with "styles.---". It looks kinda hard to read with all of the "styles.---". There was a problem hiding this comment. yeah I think in my previous project we also imported all styling individually instead of using styles. or texts. So I agree that we should change it to import individually. E.g. in texts.ts I imported all the fonts as: I will also make this announcement on slack |
||
|
|
||
|
|
@@ -46,39 +47,58 @@ | |
|
|
||
| return ( | ||
| <div> | ||
|
There was a problem hiding this comment. We need this modal component. There was a problem hiding this comment. just tested it out and I think that this is causing the issue. So instead of making a Modal styled component, revert to julee's previous code where he did:
You can keep everything else as a styled component though! |
||
| <styles.ModalContent isOpen={openFirst}> | ||
| <styles.ModalOverlay> | ||
| <styles.SearchBar>Search</styles.SearchBar> | ||
|
There was a problem hiding this comment. remove the search bar (this will directly be on the home page) |
||
| <styles.ProjectDetailsBorder> | ||
| <styles.ProjectDetails> | ||
| <img | ||
|
Check warning on line 55 in components/ProjectModal/index.tsx
|
||
| src={project_image ? project_image : ''} | ||
| alt="Project Image" | ||
| style={styles.projectImageStyles} | ||
| /> | ||
| <styles.ProjectOverview> | ||
| <styles.Developer> | ||
| <texts.BodyText1>Developer - {developer}</texts.BodyText1> | ||
|
There was a problem hiding this comment. Is it possible to change the dash ( - ) to an arrow like in Josh's figma design? If not, let Josh know and see what he decides. |
||
| <styles.CloseButton onClick={closeModal}> | ||
|
There was a problem hiding this comment. Can you make the pointer arrow become the hand when it hovers on a button (like how it normally looks on other websites)? You can use this for help https://stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item . You just need to add |
||
| <FiX size={20} color="#000" /> | ||
| </styles.CloseButton> | ||
| </styles.Developer> | ||
| <styles.ProjectName> | ||
| <texts.Heading1>{project_name?.toUpperCase()}</texts.Heading1> | ||
| </styles.ProjectName> | ||
| <styles.ProjectFilterWrapper> | ||
| <styles.ProjectFilter> | ||
| <texts.TagText1>{project_status}</texts.TagText1> | ||
| </styles.ProjectFilter> | ||
| <styles.ProjectFilter> | ||
| <texts.TagText1> | ||
| {renewable_energy_technology} | ||
| </texts.TagText1> | ||
| </styles.ProjectFilter> | ||
| </styles.ProjectFilterWrapper> | ||
| </styles.ProjectOverview> | ||
| <styles.ProjectSize> | ||
| <texts.AccentText1> | ||
| <FiZap size={42} /> | ||
| {size} | ||
| </texts.AccentText1> | ||
| <texts.AccentText2>MW / Mo</texts.AccentText2> | ||
| </styles.ProjectSize> | ||
| <styles.Divider /> | ||
| <styles.AdditionalInfo> | ||
| <styles.DetailsContainer> | ||
| <texts.BodyText1>DETAILS</texts.BodyText1> | ||
| <styles.Divider /> | ||
| </styles.DetailsContainer> | ||
| <styles.AdditionalText> | ||
| <texts.BodyText1>{additional_information}</texts.BodyText1> | ||
| </styles.AdditionalText> | ||
| </styles.AdditionalInfo> | ||
| </styles.ProjectDetails> | ||
| </styles.ProjectDetailsBorder> | ||
| </styles.ModalOverlay> | ||
| </styles.ModalContent> | ||
| </div> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,153 @@ | ||
| import { CSSProperties } from 'react'; | ||
| import Modal from 'react-modal'; | ||
| import styled from 'styled-components'; | ||
| import COLORS from '../../styles/colors'; | ||
|
|
||
| export const ModalOverlay = styled.div` | ||
| width: 310px; | ||
| height: 100%; | ||
| `; | ||
|
|
||
| export const ModalContent = styled(Modal)` | ||
| display: flex; | ||
| width: 360px; | ||
| height: 100%; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const SearchBar = styled.div` | ||
| width: 340px; | ||
| height: 50px; | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| border-radius: 8px; | ||
| border: 1px solid rgba(46, 58, 89, 0.5); | ||
| background: ${COLORS.white}; | ||
| box-shadow: 0px 4px 5px rgba(255, 255, 255, 0.25); | ||
| align-items: center; | ||
| justify-content: center; | ||
| z-index: 2; | ||
| position: relative; | ||
| margin-top: 1.25rem; | ||
| margin-bottom: 1.25rem; | ||
| `; | ||
|
|
||
| export const ProjectDetailsBorder = styled.div` | ||
| width: 356px; | ||
| height: 82%; | ||
| border-radius: var(--Spacing-Small, 16px); | ||
| border: 0.75px solid var(--WorldPeas-White, #fff); | ||
| background: linear-gradient( | ||
| 180deg, | ||
| rgba(250, 250, 250, 0.32) 0%, | ||
| rgba(238, 238, 238, 0.65) 100% | ||
| ); | ||
| backdrop-filter: blur(7.5px); | ||
| padding-top: 0.625rem; | ||
| padding-bottom: 0.625rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const ProjectDetails = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| border-radius: var(--Spacing-Small, 16px); | ||
| height: 100%; | ||
| background: ${COLORS.white}; | ||
| width: 340px; | ||
| `; | ||
|
|
||
| export const projectImageStyles: CSSProperties = { | ||
| position: 'absolute', | ||
| width: '340px', | ||
| height: '250px', | ||
| objectFit: 'cover', | ||
| borderRadius: '8px 8px 0px 0px', | ||
| }; | ||
|
|
||
| export const ProjectOverview = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 316px; | ||
| height: 129px; | ||
| margin-top: 9.5rem; | ||
| border-radius: 8px; | ||
| background: ${COLORS.white}; | ||
| box-shadow: | ||
| 0px 2px 6px rgba(77, 87, 114, 0.08), | ||
| 0px -2px 5px rgba(255, 255, 255, 0.1); | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| padding: 1rem; | ||
| `; | ||
|
|
||
| export const Developer = styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const ProjectName = styled.div` | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| padding-bottom: 0.75rem; | ||
| `; | ||
|
|
||
| export const ProjectFilterWrapper = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| `; | ||
|
|
||
| export const ProjectFilter = styled.div` | ||
| border-radius: 100px; | ||
| border: 0.5px solid rgba(46, 58, 89, 0.25); | ||
| display: inline-flex; | ||
| height: 22px; | ||
| padding: 0.1875rem 0.625rem; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const CloseButton = styled.button` | ||
| box-shadow: none; | ||
| background: none; | ||
| border: none; | ||
| `; | ||
|
|
||
| export const ProjectSize = styled.div` | ||
| display: flex; | ||
| align-items: baseline; | ||
| width: 260px; | ||
| padding-top: 1.2rem; | ||
| gap: 0.5rem; | ||
| `; | ||
|
|
||
| export const Divider = styled.hr` | ||
| width: 260px; | ||
| border: 0; | ||
| height: 1px; | ||
| margin: 0px 0; | ||
| background: rgba(46, 58, 89, 0.1); | ||
| `; | ||
|
|
||
| export const AdditionalInfo = styled.div` | ||
| width: 260px; | ||
| padding: 1.25rem; | ||
| `; | ||
|
|
||
| export const DetailsContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| gap: 0.5rem; | ||
| `; | ||
|
|
||
| export const AdditionalText = styled.div` | ||
| padding-top: 1.25rem; | ||
| `; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Our project modal component is built off of an already existing React Modal library that we are importing, so we shouldn't remove this.