From 7fde67b0cd09761b07661deebc945fc103540587 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Wed, 20 Nov 2019 13:57:01 -0500
Subject: [PATCH] add assemble flow responsiveness

---
 src/components/image/AssembleFlow.jsx          |  2 +-
 src/components/projects/ProjectsHeader.jsx     | 11 +++++++++--
 src/components/projects/styles/ListProjects.js |  4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/image/AssembleFlow.jsx b/src/components/image/AssembleFlow.jsx
index 884675b..52e132b 100644
--- a/src/components/image/AssembleFlow.jsx
+++ b/src/components/image/AssembleFlow.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SVG = () =>
-  <svg width="660" height="515" viewBox="0 0 660 515" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="auto" height="auto" viewBox="0 0 660 515" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="291.5" y="0.5" width="1" height="76" stroke="url(#paint0_linear)"/>
     <path d="M400.773 81C400.341 78.6136 398.432 77.2045 396.091 77.2045C393.114 77.2045 390.955 79.5 390.955 83.1818C390.955 86.8636 393.114 89.1591 396.091 89.1591C398.432 89.1591 400.341 87.75 400.773 85.3636H399.364C399.023 86.9773 397.636 87.8409 396.091 87.8409C393.977 87.8409 392.318 86.2045 392.318 83.1818C392.318 80.1591 393.977 78.5227 396.091 78.5227C397.636 78.5227 399.023 79.3864 399.364 81H400.773ZM404.209 83.75C404.209 82.2273 405.18 81.3636 406.504 81.3636C407.766 81.3636 408.527 82.1591 408.527 83.5455V89H409.868V83.4545C409.868 81.2102 408.675 80.1591 406.891 80.1591C405.516 80.1591 404.732 80.733 404.322 81.6364H404.209V77.3636H402.868V89H404.209V83.75ZM415.866 89.1818C418.23 89.1818 419.821 87.3864 419.821 84.6818C419.821 81.9545 418.23 80.1591 415.866 80.1591C413.503 80.1591 411.912 81.9545 411.912 84.6818C411.912 87.3864 413.503 89.1818 415.866 89.1818ZM415.866 87.9773C414.071 87.9773 413.253 86.4318 413.253 84.6818C413.253 82.9318 414.071 81.3636 415.866 81.3636C417.662 81.3636 418.48 82.9318 418.48 84.6818C418.48 86.4318 417.662 87.9773 415.866 87.9773ZM425.413 89.1818C427.777 89.1818 429.368 87.3864 429.368 84.6818C429.368 81.9545 427.777 80.1591 425.413 80.1591C423.05 80.1591 421.459 81.9545 421.459 84.6818C421.459 87.3864 423.05 89.1818 425.413 89.1818ZM425.413 87.9773C423.618 87.9773 422.8 86.4318 422.8 84.6818C422.8 82.9318 423.618 81.3636 425.413 81.3636C427.209 81.3636 428.027 82.9318 428.027 84.6818C428.027 86.4318 427.209 87.9773 425.413 87.9773ZM437.597 82.2273C437.176 80.9886 436.233 80.1591 434.506 80.1591C432.665 80.1591 431.301 81.2045 431.301 82.6818C431.301 83.8864 432.017 84.6932 433.619 85.0682L435.074 85.4091C435.955 85.6136 436.369 86.0341 436.369 86.6364C436.369 87.3864 435.574 88 434.324 88C433.227 88 432.54 87.5284 432.301 86.5909L431.028 86.9091C431.341 88.392 432.562 89.1818 434.347 89.1818C436.375 89.1818 437.756 88.0739 437.756 86.5682C437.756 85.3523 436.994 84.5852 435.438 84.2045L434.142 83.8864C433.108 83.6307 432.642 83.2841 432.642 82.6136C432.642 81.8636 433.438 81.3182 434.506 81.3182C435.676 81.3182 436.159 81.9659 436.392 82.5682L437.597 82.2273ZM443.433 89.1818C445.206 89.1818 446.501 88.2955 446.911 86.9773L445.615 86.6136C445.274 87.5227 444.484 87.9773 443.433 87.9773C441.859 87.9773 440.774 86.9602 440.712 85.0909H447.047V84.5227C447.047 81.2727 445.115 80.1591 443.297 80.1591C440.933 80.1591 439.365 82.0227 439.365 84.7045C439.365 87.3864 440.911 89.1818 443.433 89.1818ZM440.712 83.9318C440.803 82.5739 441.763 81.3636 443.297 81.3636C444.751 81.3636 445.683 82.4545 445.683 83.9318H440.712ZM456.155 89.2045C457.678 89.2045 458.473 88.3864 458.746 87.8182H458.814V89H460.155V83.25C460.155 80.4773 458.041 80.1591 456.928 80.1591C455.609 80.1591 454.109 80.6136 453.428 82.2045L454.7 82.6591C454.996 82.0227 455.695 81.3409 456.973 81.3409C458.206 81.3409 458.814 81.9943 458.814 83.1136V83.1591C458.814 83.8068 458.155 83.75 456.564 83.9545C454.945 84.1648 453.178 84.5227 453.178 86.5227C453.178 88.2273 454.496 89.2045 456.155 89.2045ZM456.359 88C455.291 88 454.518 87.5227 454.518 86.5909C454.518 85.5682 455.45 85.25 456.496 85.1136C457.064 85.0455 458.587 84.8864 458.814 84.6136V85.8409C458.814 86.9318 457.95 88 456.359 88ZM467.102 92.2727H468.443V87.6591H468.557C468.852 88.1364 469.42 89.1818 471.102 89.1818C473.284 89.1818 474.807 87.4318 474.807 84.6591C474.807 81.9091 473.284 80.1591 471.08 80.1591C469.375 80.1591 468.852 81.2045 468.557 81.6591H468.398V80.2727H467.102V92.2727ZM468.42 84.6364C468.42 82.6818 469.284 81.3636 470.92 81.3636C472.625 81.3636 473.466 82.7955 473.466 84.6364C473.466 86.5 472.602 87.9773 470.92 87.9773C469.307 87.9773 468.42 86.6136 468.42 84.6364ZM476.852 89H478.193V83.4773C478.193 82.2955 479.125 81.4318 480.398 81.4318C480.756 81.4318 481.125 81.5 481.216 81.5227V80.1591C481.062 80.1477 480.71 80.1364 480.511 80.1364C479.466 80.1364 478.557 80.7273 478.239 81.5909H478.148V80.2727H476.852V89ZM486.085 89.1818C488.449 89.1818 490.04 87.3864 490.04 84.6818C490.04 81.9545 488.449 80.1591 486.085 80.1591C483.722 80.1591 482.131 81.9545 482.131 84.6818C482.131 87.3864 483.722 89.1818 486.085 89.1818ZM486.085 87.9773C484.29 87.9773 483.472 86.4318 483.472 84.6818C483.472 82.9318 484.29 81.3636 486.085 81.3636C487.881 81.3636 488.699 82.9318 488.699 84.6818C488.699 86.4318 487.881 87.9773 486.085 87.9773ZM492.087 80.2727V89.6364C492.087 90.5227 491.723 91.0227 490.905 91.0227H490.655V92.2727H490.928C492.609 92.2727 493.428 91.25 493.428 89.6364V80.2727H492.087ZM492.746 78.8182C493.268 78.8182 493.7 78.4091 493.7 77.9091C493.7 77.4091 493.268 77 492.746 77C492.223 77 491.791 77.4091 491.791 77.9091C491.791 78.4091 492.223 78.8182 492.746 78.8182ZM499.543 89.1818C501.315 89.1818 502.611 88.2955 503.02 86.9773L501.724 86.6136C501.384 87.5227 500.594 87.9773 499.543 87.9773C497.969 87.9773 496.884 86.9602 496.821 85.0909H503.156V84.5227C503.156 81.2727 501.224 80.1591 499.406 80.1591C497.043 80.1591 495.474 82.0227 495.474 84.7045C495.474 87.3864 497.02 89.1818 499.543 89.1818ZM496.821 83.9318C496.912 82.5739 497.872 81.3636 499.406 81.3636C500.861 81.3636 501.793 82.4545 501.793 83.9318H496.821ZM508.741 89.1818C510.673 89.1818 511.946 88 512.173 86.4545H510.832C510.582 87.4091 509.787 87.9773 508.741 87.9773C507.151 87.9773 506.128 86.6591 506.128 84.6364C506.128 82.6591 507.173 81.3636 508.741 81.3636C509.923 81.3636 510.628 82.0909 510.832 82.8864H512.173C511.946 81.25 510.56 80.1591 508.719 80.1591C506.355 80.1591 504.787 82.0227 504.787 84.6818C504.787 87.2955 506.287 89.1818 508.741 89.1818ZM517.929 80.2727H516.065V78.1818H514.724V80.2727H513.406V81.4091H514.724V86.8636C514.724 88.3864 515.952 89.1136 517.088 89.1136C517.588 89.1136 517.906 89.0227 518.088 88.9545L517.815 87.75C517.702 87.7727 517.52 87.8182 517.224 87.8182C516.634 87.8182 516.065 87.6364 516.065 86.5V81.4091H517.929V80.2727Z" fill="#1AA56E"/>
     <path d="M528.241 80.2727H526.378V78.1818H525.037V80.2727H523.719V81.4091H525.037V86.8636C525.037 88.3864 526.264 89.1136 527.401 89.1136C527.901 89.1136 528.219 89.0227 528.401 88.9545L528.128 87.75C528.014 87.7727 527.832 87.8182 527.537 87.8182C526.946 87.8182 526.378 87.6364 526.378 86.5V81.4091H528.241V80.2727ZM533.71 89.1818C536.074 89.1818 537.665 87.3864 537.665 84.6818C537.665 81.9545 536.074 80.1591 533.71 80.1591C531.347 80.1591 529.756 81.9545 529.756 84.6818C529.756 87.3864 531.347 89.1818 533.71 89.1818ZM533.71 87.9773C531.915 87.9773 531.097 86.4318 531.097 84.6818C531.097 82.9318 531.915 81.3636 533.71 81.3636C535.506 81.3636 536.324 82.9318 536.324 84.6818C536.324 86.4318 535.506 87.9773 533.71 87.9773ZM550.393 82.2273C549.973 80.9886 549.03 80.1591 547.303 80.1591C545.462 80.1591 544.098 81.2045 544.098 82.6818C544.098 83.8864 544.814 84.6932 546.416 85.0682L547.871 85.4091C548.751 85.6136 549.166 86.0341 549.166 86.6364C549.166 87.3864 548.371 88 547.121 88C546.024 88 545.337 87.5284 545.098 86.5909L543.825 86.9091C544.138 88.392 545.359 89.1818 547.143 89.1818C549.172 89.1818 550.553 88.0739 550.553 86.5682C550.553 85.3523 549.791 84.5852 548.234 84.2045L546.939 83.8864C545.905 83.6307 545.439 83.2841 545.439 82.6136C545.439 81.8636 546.234 81.3182 547.303 81.3182C548.473 81.3182 548.956 81.9659 549.189 82.5682L550.393 82.2273ZM558.071 85.4318C558.071 87.0682 556.821 87.8182 555.821 87.8182C554.707 87.8182 553.912 87 553.912 85.7273V80.2727H552.571V85.8182C552.571 88.0455 553.753 89.1136 555.389 89.1136C556.707 89.1136 557.571 88.4091 557.98 87.5227H558.071V89H559.412V80.2727H558.071V85.4318ZM561.868 92.2727H563.209V87.6591H563.322C563.618 88.1364 564.186 89.1818 565.868 89.1818C568.05 89.1818 569.572 87.4318 569.572 84.6591C569.572 81.9091 568.05 80.1591 565.845 80.1591C564.141 80.1591 563.618 81.2045 563.322 81.6591H563.163V80.2727H561.868V92.2727ZM563.186 84.6364C563.186 82.6818 564.05 81.3636 565.686 81.3636C567.391 81.3636 568.232 82.7955 568.232 84.6364C568.232 86.5 567.368 87.9773 565.686 87.9773C564.072 87.9773 563.186 86.6136 563.186 84.6364ZM571.618 92.2727H572.959V87.6591H573.072C573.368 88.1364 573.936 89.1818 575.618 89.1818C577.8 89.1818 579.322 87.4318 579.322 84.6591C579.322 81.9091 577.8 80.1591 575.595 80.1591C573.891 80.1591 573.368 81.2045 573.072 81.6591H572.913V80.2727H571.618V92.2727ZM572.936 84.6364C572.936 82.6818 573.8 81.3636 575.436 81.3636C577.141 81.3636 577.982 82.7955 577.982 84.6364C577.982 86.5 577.118 87.9773 575.436 87.9773C573.822 87.9773 572.936 86.6136 572.936 84.6364ZM584.913 89.1818C587.277 89.1818 588.868 87.3864 588.868 84.6818C588.868 81.9545 587.277 80.1591 584.913 80.1591C582.55 80.1591 580.959 81.9545 580.959 84.6818C580.959 87.3864 582.55 89.1818 584.913 89.1818ZM584.913 87.9773C583.118 87.9773 582.3 86.4318 582.3 84.6818C582.3 82.9318 583.118 81.3636 584.913 81.3636C586.709 81.3636 587.527 82.9318 587.527 84.6818C587.527 86.4318 586.709 87.9773 584.913 87.9773ZM590.915 89H592.256V83.4773C592.256 82.2955 593.188 81.4318 594.46 81.4318C594.818 81.4318 595.188 81.5 595.278 81.5227V80.1591C595.125 80.1477 594.773 80.1364 594.574 80.1364C593.528 80.1364 592.619 80.7273 592.301 81.5909H592.21V80.2727H590.915V89ZM601.21 80.2727H599.347V78.1818H598.006V80.2727H596.688V81.4091H598.006V86.8636C598.006 88.3864 599.233 89.1136 600.369 89.1136C600.869 89.1136 601.188 89.0227 601.369 88.9545L601.097 87.75C600.983 87.7727 600.801 87.8182 600.506 87.8182C599.915 87.8182 599.347 87.6364 599.347 86.5V81.4091H601.21V80.2727ZM604.205 89.0909C604.767 89.0909 605.227 88.6307 605.227 88.0682C605.227 87.5057 604.767 87.0455 604.205 87.0455C603.642 87.0455 603.182 87.5057 603.182 88.0682C603.182 88.6307 603.642 89.0909 604.205 89.0909Z" fill="black"/>
diff --git a/src/components/projects/ProjectsHeader.jsx b/src/components/projects/ProjectsHeader.jsx
index dadedd0..9d0e070 100644
--- a/src/components/projects/ProjectsHeader.jsx
+++ b/src/components/projects/ProjectsHeader.jsx
@@ -45,8 +45,7 @@ const useStyles = makeStyles(({
     padding: '1rem'
   },
   flowImage: {
-    gridColumn: '13 / 48',
-    paddingLeft: '1em'
+    gridColumn: '14 / 36'
   },
   cardMainFont: {
     fontSize: '24px'
@@ -61,6 +60,13 @@ const useStyles = makeStyles(({
   },
   primary: {
     color: primary[500]
+  },
+  listedProjects: {
+    gridColumn: '1 / 49',
+    textAlign: 'center',
+    fontSize: '20px',
+    fontWeight: 'bold',
+    marginTop: '3rem'
   }
 
 }))
@@ -135,6 +141,7 @@ function ProjectsHeader() {
       <div className={classes.flowImage}>
         <AssembleFlow />
       </div>
+      <Typography className={classes.listedProjects}>Listed Projects</Typography>
     </Fragment>
   )
 }
diff --git a/src/components/projects/styles/ListProjects.js b/src/components/projects/styles/ListProjects.js
index 900dec3..89791ea 100644
--- a/src/components/projects/styles/ListProjects.js
+++ b/src/components/projects/styles/ListProjects.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   main: {
     display: 'grid',
     gridTemplateColumns: 'repeat(48, [col] 1fr)',
-    gridTemplateRows: '4rem 4rem auto 0.5fr 1fr 0.3fr'
+    gridTemplateRows: '4rem 4rem auto auto 6rem'
   },
   title: {
     fontSize: '2rem',
@@ -128,7 +128,7 @@ const useStyles = makeStyles(theme => ({
   tableHeader: {
     color: 'rgba(147, 155, 161, 0.8)',
     fontSize: '0.9rem',
-    gridRow: '5 / 6'
+    gridRow: '6 / 7'
   },
   headerName: {
     gridColumn: '3 / 12'