refactor(ZNTA-2415) user profile to antd

zanata · May 8, 2018 · f43a4ea · f43a4ea
1 parent d4163b9
commit f43a4ea
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/server/zanata-frontend/src/app/containers/UserProfile/DayMatrix.jsx b/server/zanata-frontend/src/app/containers/UserProfile/DayMatrix.jsx
@@ -2,16 +2,16 @@ import * as PropTypes from 'prop-types'
 import React from 'react'
 import { ContentStates } from '../../constants/Options'
 import dateUtil from '../../utils/DateHelper'
-import { Button } from 'react-bootstrap'
+import { Button } from 'antd'
 
 /**
  * Clickable date and word count component for daily statistics
  */
 const cssClass = {
-  total: 'primary',
-  approved: 'info',
-  translated: 'success',
-  needswork: 'warning'
+  total: 'btn-primary',
+  approved: 'btn-info',
+  translated: 'btn-success',
+  needswork: 'btn-warning'
 }
 
 /** @type
@@ -38,9 +38,8 @@ const DayMatrix = ({
     <td>
       {date
         ? <Button
-          bsStyle={btnStyle}
           onClick={() => handleSelectedDayChanged(date)}
-          className={date === selectedDay ? 'active ' : ''}
+          className={date === selectedDay ? btnStyle + ' active' : btnStyle}
           disabled={dateIsInFuture || !date}
           title={wordCount + ' words'}>
           <div className='cal-date'>{date ? dateLabel : '\u00a0'}</div>

diff --git a/server/zanata-frontend/src/app/containers/UserProfile/index.less b/server/zanata-frontend/src/app/containers/UserProfile/index.less
@@ -26,6 +26,9 @@
     max-width: 20rem;
     width: 100%;
   }
+  .userProfile-calendarActivity {
+    padding-bottom: 3rem;
+  }
   .userProfile-wrapper {
     margin-top: @spacing-rh;
   }
@@ -161,7 +164,6 @@
     text-align: center;
     vertical-align: top;
     margin-bottom: @spacing-base-and-a-half;
-    table-layout: fixed;
     width: 100%
   }
   .userProfile-activityGraph h3 {
@@ -191,7 +193,9 @@
     margin-bottom: @spacing-rq;
   }
   #userProfile-activityTable td button {
-    padding: 0;
+    height: 5.5rem;
+    padding: 0 !important;
+    width: 100%;
   }
   #userProfile-activityTable td button.btn-primary {
     background-color: rgba(84, 102, 119, 0.65) !important;
@@ -292,7 +296,12 @@
   }
   .modal-content {
     max-width: inherit;
-  } // @screen-xs variable depreciated
+  }
+  .matrix-inner {
+    width: 100%;
+    margin-right: @spacing-base;
+  }
+  // @screen-xs variable depreciated
   @media (max-width: 29.375rem) {
     .matrix-table {
       display: block;
@@ -314,10 +323,6 @@
       flex-direction: row;
       -webkit-flex-direction: row;
     }
-    .matrix-inner {
-      width: 100%;
-      margin-right: @spacing-base;
-    }
     .matrixHeading {
       width: 100%;
     }