Reduced the width of clap-bookmark-view icons

unstructuredstudio · Apr 13, 2022 · 4220277 · 4220277
1 parent c934a75
commit 4220277
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 68 deletions.
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/project_details/projectDetailsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/project_details/projectDetailsStyles.js
@@ -104,7 +104,7 @@ const styles = theme => ({
     [theme.breakpoints.down('1080')]: {
       position: 'static',
       height: '3.5em',
-      width: '100%',
+      width: 'fit-content',
       flexDirection: 'row',
       justifyContent: 'flex-end',
       paddingRight: 12,

diff --git a/zubhub_frontend/zubhub/src/views/project_details/ProjectDetails.jsx b/zubhub_frontend/zubhub/src/views/project_details/ProjectDetails.jsx
@@ -303,75 +303,76 @@ function ProjectDetails(props) {
                       </a>
                     ) : null}
                   </Grid>
-                  {/* box style here */}
-                  <Box className={classes.actionBoxStyle}>
-                    <CustomButton
-                      className={classes.actionBoxButtonStyle}
-                      size="small"
-                      aria-label={t(
-                        'projectDetails.ariaLabels.likeButton.label',
-                      )}
-                      variant="extended"
-                      onClick={e =>
-                        handleSetState(toggleLike(e, props, project.id))
-                      }
-                    >
-                      <Box className={classes.iconsBoxStyle}>
-                        {project.likes.includes(props.auth.id) ? (
-                          <ClapIcon
-                            arial-label={t(
-                              'projectDetails.ariaLabels.likeButton.unlilke',
-                            )}
-                          />
-                        ) : (
-                          <ClapBorderIcon
-                            arial-label={t(
-                              'projectDetails.ariaLabels.likeButton.like',
-                            )}
-                          />
+                  <Box display="flex" justifyContent="flex-end">
+                    <Box className={classes.actionBoxStyle}>
+                      <CustomButton
+                        className={classes.actionBoxButtonStyle}
+                        size="small"
+                        aria-label={t(
+                          'projectDetails.ariaLabels.likeButton.label',
                         )}
-                      </Box>
-                      <Typography>
-                        {nFormatter(project.likes.length)}
-                      </Typography>
-                    </CustomButton>
-                    <CustomButton
-                      className={classes.actionBoxButtonStyle}
-                      size="small"
-                      aria-label={t(
-                        'projectDetails.ariaLabels.saveButton.label',
-                      )}
-                      onClick={e =>
-                        handleSetState(toggleSave(e, props, project.id))
-                      }
-                    >
-                      <Box className={classes.iconsBoxStyle}>
-                        {project.saved_by.includes(props.auth.id) ? (
-                          <BookmarkIcon
-                            aria-label={t(
-                              'projectDetails.ariaLabels.saveButton.unsave',
-                            )}
-                          />
-                        ) : (
-                          <BookmarkBorderIcon
-                            aria-label={t(
-                              'projectDetails.ariaLabels.saveButton.save',
-                            )}
-                          />
+                        variant="extended"
+                        onClick={e =>
+                          handleSetState(toggleLike(e, props, project.id))
+                        }
+                      >
+                        <Box className={classes.iconsBoxStyle}>
+                          {project.likes.includes(props.auth.id) ? (
+                            <ClapIcon
+                              arial-label={t(
+                                'projectDetails.ariaLabels.likeButton.unlilke',
+                              )}
+                            />
+                          ) : (
+                            <ClapBorderIcon
+                              arial-label={t(
+                                'projectDetails.ariaLabels.likeButton.like',
+                              )}
+                            />
+                          )}
+                        </Box>
+                        <Typography>
+                          {nFormatter(project.likes.length)}
+                        </Typography>
+                      </CustomButton>
+                      <CustomButton
+                        className={classes.actionBoxButtonStyle}
+                        size="small"
+                        aria-label={t(
+                          'projectDetails.ariaLabels.saveButton.label',
                         )}
-                      </Box>
-                    </CustomButton>
-                    <Typography
-                      color="textSecondary"
-                      variant="caption"
-                      component="span"
-                      className={classes.actionBoxButtonStyle}
-                    >
-                      <Box className={classes.iconsBoxStyle}>
-                        <VisibilityIcon />
-                      </Box>
-                      <Typography>{project.views_count}</Typography>
-                    </Typography>
+                        onClick={e =>
+                          handleSetState(toggleSave(e, props, project.id))
+                        }
+                      >
+                        <Box className={classes.iconsBoxStyle}>
+                          {project.saved_by.includes(props.auth.id) ? (
+                            <BookmarkIcon
+                              aria-label={t(
+                                'projectDetails.ariaLabels.saveButton.unsave',
+                              )}
+                            />
+                          ) : (
+                            <BookmarkBorderIcon
+                              aria-label={t(
+                                'projectDetails.ariaLabels.saveButton.save',
+                              )}
+                            />
+                          )}
+                        </Box>
+                      </CustomButton>
+                      <Typography
+                        color="textSecondary"
+                        variant="caption"
+                        component="span"
+                        className={classes.actionBoxButtonStyle}
+                      >
+                        <Box className={classes.iconsBoxStyle}>
+                          <VisibilityIcon />
+                        </Box>
+                        <Typography>{project.views_count}</Typography>
+                      </Typography>
+                    </Box>
                   </Box>
                 </Grid>
                 {project.images && project.images.length > 0 ? (