Lifelines page styling (#88)

* Add draggable dots

* Style Lifelines Page

* Fix build

* Convert to styled component

* fixed styled components bug

* fixed styling for cards

* fix styling for cards

* fix imports

* add input

Co-authored-by: daniel-moon32 <[email protected]>

Author: riyajain59

client/package.json

@@ -37,6 +37,7 @@
     "react-scripts": "5.0.0",
     "react-select": "^5.2.2",
     "styled-components": "^5.3.5",
+    "styled-icons": "^10.45.0",
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4"
   },

client/src/components/draggable/DraggableLifelines.tsx

@@ -1,4 +1,5 @@
 import { TrashAlt } from '@styled-icons/boxicons-solid'
+import { ReOrderDotsVertical } from '@styled-icons/fluentui-system-filled/ReOrderDotsVertical'
 import { CSSProperties, useEffect, useState } from 'react'
 import {
   DragDropContext,
@@ -8,6 +9,7 @@ import {
   DropResult,
   NotDraggingStyle,
 } from 'react-beautiful-dnd'
+import styled, { css } from 'styled-components'
 
 import { ModuleResInterface } from '../../interfaces'
 import {
@@ -20,11 +22,38 @@ import LifelineCard from './LifelineCard'
 interface DraggableLifelinesInterface {
   lifelinesProp: ModuleResInterface[]
 }
+const StyledDiv = styled.div`
+  display: flex;
+  background: #f1f1f1;
+  border-radius: 10px;
+  width: 92.5%;
+  padding: 0 2% 0 1%;
+  grid-column: 2;
+  border: 2px lightgrey solid;
+  ${(props) =>
+    props.draggingOver
+      ? css`
+          border-color: ${({ theme }) => theme.buttonBackground};
+        `
+      : css`
+          border-color: ${({ theme }) => theme.secondaryText};
+        `}
+`
+const Card = styled.div`
+  display: flex;
+  align-self: center;
+  width: 5%;
+  font-size: 1.29em;
+  margin-left: 0%;
+`
 
+const Alignment = styled.div`
+  margin-left: 15%;
+  align-self: center;
+`
 const DraggableLifelines = ({ lifelinesProp }: DraggableLifelinesInterface) => {
   const BASE_PADDING = 4
   const [lifelines, setLifelines] = useState<ModuleResInterface[]>([])
-
   /* fill lifelines with passed in props for rendering */
   useEffect(() => {
     setLifelines(lifelinesProp)
@@ -41,19 +70,18 @@ const DraggableLifelines = ({ lifelinesProp }: DraggableLifelinesInterface) => {
 
   const getDraggableItemStyle = (
     draggableStyle: DraggingStyle | NotDraggingStyle | undefined,
+    isDraggingOver,
   ): CSSProperties => ({
-    padding: BASE_PADDING * 2,
-    margin: `0 0 ${BASE_PADDING}px 0`,
+    paddingBottom: BASE_PADDING * 2,
+    margin: `0 0 15px 0`,
     alignItems: 'center',
     display: 'grid',
-    gridTemplateColumns: '2.5fr 95fr 2.5fr',
-
+    gridTemplateColumns: '0fr 95fr 2.5fr',
     // styles we need to apply on draggables
     ...draggableStyle,
   })
 
   const getDroppableStyle = () => ({
-    padding: `${BASE_PADDING}px`,
     margin: '0 auto',
     width: '95vw',
   })
@@ -84,41 +112,28 @@ const DraggableLifelines = ({ lifelinesProp }: DraggableLifelinesInterface) => {
                 draggableId={index.toString()}
                 index={index}
               >
-                {(provided, _) => (
+                {(provided, snapshot) => (
                   <div
                     ref={provided.innerRef}
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
-                    style={getDraggableItemStyle(provided.draggableProps.style)}
-                  >
-                    {index < NUM_LIFELINES_DISPLAYED && (
-                      <p
-                        style={{
-                          border: 'black 2px solid',
-                          borderRadius: '5px',
-                          gridColumn: 1,
-                          fontSize: '0.65em',
-                          justifySelf: 'center',
-                          padding: '10%',
-                        }}
-                      >
-                        {index + 1}
-                      </p>
+                    style={getDraggableItemStyle(
+                      provided.draggableProps.style,
+                      snapshot.draggingOver,
                     )}
-                    <div
-                      style={{
-                        background: '#f1f1f1',
-                        borderRadius: '10px',
-                        width: '92.5%',
-                        padding: '0 2%',
-                        gridColumn: 2,
-                      }}
-                    >
+                  >
+                    <StyledDiv draggingOver={snapshot.draggingOver}>
+                      <Card>
+                        <ReOrderDotsVertical size="20px" />
+                        <Alignment>
+                          {index < NUM_LIFELINES_DISPLAYED && index + 1}
+                        </Alignment>
+                      </Card>
                       <LifelineCard
                         lifeline={lifeline}
                         isDisplayed={index < NUM_LIFELINES_DISPLAYED}
                       />
-                    </div>
+                    </StyledDiv>
                     {/* render delete button */}
                     <TrashAlt
                       size={'1.5em'}

client/src/components/draggable/LifelineCard.tsx

@@ -1,4 +1,4 @@
-import { PencilFill } from '@styled-icons/bootstrap'
+import styled from 'styled-components'
 
 import { ModuleResInterface } from '../../interfaces'
 import { returnFirstString } from '../../utils/utils'
@@ -7,45 +7,52 @@ interface LifelineCardInterface {
   lifeline: ModuleResInterface
   isDisplayed: boolean
 }
+const Card = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 10px;
+`
+const Text = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+  justify-content: center;
+`
 
+const Lifeline = styled.div`
+  font-weight: 700;
+  font-size: 18px;
+  font-family: ${({ theme }) => theme.text};
+`
+
+const Source = styled.div`
+  margin-top: 8px;
+  font-weight: 400;
+  font-size: 18px;
+  font-family: ${({ theme }) => theme.text};
+`
+const HideButton = styled.p`
+  font-size: 0.8em;
+  border: 1px black solid;
+  padding: 5px 7.5px;
+  border-radius: 5px;
+  text-align: center;
+  align-self: center;
+  grid-column: 2;
+`
 const LifelineCard = ({
   lifeline: { labels, customizable },
   isDisplayed,
 }: LifelineCardInterface) => {
   return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '15fr 1fr 1fr',
-        gridGap: '5px',
-      }}
-    >
-      <h1 style={{ gridColumn: 1 }}>{returnFirstString(labels)}</h1>
-      <p
-        style={{
-          fontSize: '0.8em',
-          border: '1px black solid',
-          padding: '5px 7.5px',
-          borderRadius: '5px',
-          textAlign: 'center',
-          alignSelf: 'center',
-          gridColumn: 2,
-        }}
-      >
-        {isDisplayed ? 'Hide' : 'Show'}
-      </p>
-      {customizable && (
-        <PencilFill
-          size={'1.5em'}
-          style={{
-            justifySelf: 'center',
-            cursor: 'pointer',
-            alignSelf: 'center',
-            gridColumn: 3,
-          }}
-        />
-      )}
-    </div>
+    <Card>
+      <Text>
+        <Lifeline>{returnFirstString(labels)}</Lifeline>
+        <Source>{customizable ? '' : 'Climate Clock'}</Source>
+      </Text>
+      <HideButton>{isDisplayed ? 'Hide' : 'Show'}</HideButton>
+    </Card>
   )
 }