Feature_Valentina

README.md

@@ -7,6 +7,12 @@ https://www.figmafreebies.com/download/figma-admin-dashboard-ui-kit/
 
 Although the code has been totally refactored, in order to use of functional components, hooks and integrated 100% with react-router, you can still find the original project post here "Building a UI from scratch, based on a design with ReactJS" [here](POST.md) or [here](https://dev.to/llorentegerman/building-a-ui-from-scratch-based-on-a-design-with-reactjs-3l1e).
 
+## How to install
+
+-   **Node.js and npm/yarn are required**
+-   **npm/yarn install**
+-   **npm/yarn start**
+
 ## Folder Structure
 
 ### base folder: /src:
@@ -24,6 +30,7 @@ Although the code has been totally refactored, in order to use of functional com
     i.e.: useSidebar, useQuery, etc.
 
 -   **/resources**:
+
     -   slugs.js: a list of the routes that will be used in the app
     -   theme.js: an object with the theme structure, colors, typographies.
     -   utilities.js: any utility function, for example "convertSlugToUrl", which is used in conjunction with "history.push" (react router) for redirects and links.

package.json

@@ -16,7 +16,6 @@
         "react-router-dom": "^5.2.0"
     },
     "scripts": {
-        "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject",

src/components/header/HeaderComponent.js

@@ -80,7 +80,7 @@ function HeaderComponent() {
             title = 'Ideas';
             break;
         case currentItem === SLUGS.contacts:
-            title = 'Contacts';
+            title = 'Im sergio im sorry!';
             break;
         case currentItem === SLUGS.agents:
             title = 'Agents';

src/components/sidebar/SidebarComponent.js

@@ -48,7 +48,7 @@ function SidebarComponent() {
             </div>
             <MenuItem
                 id={SLUGS.dashboard}
-                title='Dashboard'
+                title='Noteboard QUIZ'
                 icon={IconSubscription}
                 onClick={() => onClick(SLUGS.dashboard)}
             />
@@ -82,7 +82,7 @@ function SidebarComponent() {
             </MenuItem>
             <MenuItem
                 id={SLUGS.tickets}
-                title='Tickets'
+                title='Tickets airplane'
                 icon={IconTickets}
                 onClick={() => onClick(SLUGS.tickets)}
             />
@@ -116,7 +116,7 @@ function SidebarComponent() {
             </MenuItem>
             <MenuItem
                 id={SLUGS.contacts}
-                title='Contacts'
+                title='Contacts for call'
                 icon={IconContacts}
                 onClick={() => onClick(SLUGS.contacts)}
             />

src/routes/dashboard/DashboardComponent.js

@@ -49,7 +49,7 @@ function DashboardComponent() {
     const classes = useStyles();
     return (
         <Column>
-            <Row
+            {/* <Row
                 className={classes.cardsContainer}
                 wrap
                 flexGrow={1}
@@ -92,7 +92,7 @@ function DashboardComponent() {
                         value='64'
                     />
                 </Row>
-            </Row>
+            </Row> */}
             <div className={classes.todayTrends}>
                 <TodayTrendsComponent />
             </div>

src/routes/dashboard/TodayTrendsComponent.js

@@ -107,14 +107,14 @@ function TodayTrendsComponent() {
             flexGrow={1}
             className={classes.container}
             horizontal='center'
-            breakpoints={{ 1024: 'column' }}
+            // breakpoints={{ 1024: 'column' }}
         >
             <Column
                 wrap
-                flexGrow={7}
+                flexGrow={10}
                 flexBasis='735px'
                 className={classes.graphSection}
-                breakpoints={{ 1024: { width: 'calc(100% - 48px)', flexBasis: 'auto' } }}
+                // breakpoints={{ 1024: { width: 'calc(100% - 48px)', flexBasis: 'auto' } }}
             >
                 <Row wrap horizontal='space-between'>
                     <Column>
@@ -136,13 +136,13 @@ function TodayTrendsComponent() {
             <Column className={classes.separator} breakpoints={{ 1024: { display: 'none' } }}>
                 <div />
             </Column>
-            <Column flexGrow={3} flexBasis='342px' breakpoints={{ 1024: classes.stats }}>
+            {/* <Column flexGrow={3} flexBasis='342px' breakpoints={{ 1024: classes.stats }}>
                 {renderStat('Resolved', '449')}
                 {renderStat('Received', '426')}
                 {renderStat('Average first response time', '33m')}
                 {renderStat('Average response time', '3h 8m')}
                 {renderStat('Resolution within SLA', '94%')}
-            </Column>
+            </Column> */}
         </Row>
     );
 }