Robot arm UI fixed, icon size increased, tooltip added (fossasia#541)

boy-who-codes · Aug 30, 2019 · 508eba0 · 508eba0
1 parent 739e0d7
commit 508eba0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/src/screen/RobotArm/Components/KnobControl.js b/src/screen/RobotArm/Components/KnobControl.js
@@ -10,13 +10,13 @@ import {
   InputWrapper,
   TimeControlPanel,
 } from './styles';
+import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import {
   Menu as PaintIcon,
   PlayArrow as PlayIcon,
   Stop as StopIcon,
   Pause as PauseIcon,
-  Save as SaveIcon,
 } from '@material-ui/icons';
 import CustomCircularInput from '../../../components/CustomCircularInput';
 
@@ -51,7 +51,9 @@ const KnobControl = ({
               draggable="true"
               onDragStart={event => setActiveBrush('servo1')}
             >
-              <PaintIcon size={28} />
+              <Tooltip title="Drag into servo 1 timeline">
+                <PaintIcon style={{ fontSize: '38px' }} />
+              </Tooltip>
             </div>
           </ButtonWrapper>
         </Title>
@@ -77,7 +79,9 @@ const KnobControl = ({
               draggable="true"
               onDragStart={event => setActiveBrush('servo2')}
             >
-              <PaintIcon size={28} />
+              <Tooltip title="Drag into servo 2 timeline">
+                <PaintIcon style={{ fontSize: '38px' }} />
+              </Tooltip>
             </div>
           </ButtonWrapper>
         </Title>
@@ -103,7 +107,9 @@ const KnobControl = ({
               draggable="true"
               onDragStart={event => setActiveBrush('servo3')}
             >
-              <PaintIcon size={28} />
+              <Tooltip title="Drag into servo 3 timeline">
+                <PaintIcon style={{ fontSize: '38px' }} />
+              </Tooltip>
             </div>
           </ButtonWrapper>
         </Title>
@@ -129,7 +135,9 @@ const KnobControl = ({
               draggable="true"
               onDragStart={event => setActiveBrush('servo4')}
             >
-              <PaintIcon size={28} />
+              <Tooltip title="Drag into servo 4 timeline">
+                <PaintIcon style={{ fontSize: '38px' }} />
+              </Tooltip>
             </div>
           </ButtonWrapper>
         </Title>

diff --git a/src/screen/RobotArm/Components/styles.js b/src/screen/RobotArm/Components/styles.js
@@ -26,6 +26,10 @@ export const TitleText = styled.div`
 
 export const ButtonWrapper = styled.div`
   margin: 16px 16px 16px 0px;
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 export const Spacer = styled.div`
@@ -57,7 +61,7 @@ export const PaintCell = styled.div`
   border-top-color: ${props =>
     props.active ? props.theme.primary.main : '#fff'};
   width: 160px;
-  height: 100px;
+  height: 90px;
   display: flex;
   flex-direction: column;
 `;

diff --git a/src/screen/RobotArm/RobotArm.js b/src/screen/RobotArm/RobotArm.js
@@ -158,7 +158,6 @@ class RobotArm extends Component {
             active={active}
           />
         </KnobWrapper>
-        <Spacer />
         <PaintWrapper>
           <PaintArea
             timeLine={timeLine}

diff --git a/src/screen/RobotArm/RobotArm.styles.js b/src/screen/RobotArm/RobotArm.styles.js
@@ -5,6 +5,7 @@ export const Container = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 `;
 
 export const KnobWrapper = styled.div`
@@ -13,9 +14,4 @@ export const KnobWrapper = styled.div`
 
 export const PaintWrapper = styled.div`
   width: 100%;
-  flex: 1;
-`;
-
-export const Spacer = styled.div`
-  flex: 1;
 `;