added sort and search ui

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -190,11 +190,34 @@ const RepositoryInfo: React.FC = () => {
                     </Card>
                 </div>
                 <Collapse className="tagsDetail" in={showDetails}>
-                    <FormGroup>
+                    <FormGroup>  
+                        <div className="wrapperFlex">
+                            <div className="wrapperWithCheckBox">
+                                <FormControlLabel control={<Checkbox />} name="allTags" style={{display:'flex', justifyContent:'flex-end'}} label="" />
+                            </div>
+                            <div className="wrapperCollapsed">  
+                                <Card className="tagSearchCard" variant="outlined">
+                                    <CardContent>
+                                        <Grid container>
+                                            <Grid item md={4}>
+                                                <Typography className="lines" variant="h5" component="div" color="#94a1aa">
+                                                    Sort
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item md={8}>
+                                                <Typography className="lines" variant="h5" component="div" color="#94a1aa">
+                                                    Search
+                                                </Typography>
+                                            </Grid>
+                                        </Grid>
+                                    </CardContent>
+                                </Card>
+                            </div>
+                        </div>
                         {repository.tags.map((tag) => (
                             <div className="wrapperFlex">
                                 <div className="wrapperWithCheckBox">
-                                    <FormControlLabel control={<Checkbox />} name={tag.label} style={{display:'flex', justifyContent:'flex-end'}} label="" />
+                                    <FormControlLabel control={<Checkbox />} name={"tag-" + tag.label} style={{display:'flex', justifyContent:'flex-end'}} label="" />
                                 </div>
                                 <div className="wrapperCollapsed">  
                                     <Card className="tagCard" variant="outlined">

src/style/modules/_repositoryInfo.sass

@@ -2,21 +2,21 @@
     min-width: 100%
     margin: 0
     padding: 0
+    .wrapperAlwaysDisplayed
+        width: 70%
+        margin: auto
     .wrapperFlex
         min-width: 100%
         margin: 0
         padding: 0
         display: flex
-    .wrapperAlwaysDisplayed
-        width: 70%
-        margin: auto
-    .wrapperCollapsed
-        width: 70%
-        margin: auto 0
     .wrapperWithCheckBox
         width: 15%
         margin: 0
         margin: auto 0
+    .wrapperCollapsed
+        width: 70%
+        margin: auto 0
     .repositoryDetail
         margin: 5%
         padding: 15px
@@ -51,6 +51,9 @@
     .detailsCard
         margin: 0 5%
         padding: 0 15px
+    .tagSearchCard
+        margin: 5%
+        padding: 15px
     .tagCard
         margin: 5%
         padding: 15px

src/style/style.css

@@ -30,6 +30,11 @@ a {
   padding: 0;
 }
 
+.repositoryInfo .wrapperAlwaysDisplayed {
+  width: 70%;
+  margin: auto;
+}
+
 .repositoryInfo .wrapperFlex {
   min-width: 100%;
   margin: 0;
@@ -39,9 +44,10 @@ a {
   display: flex;
 }
 
-.repositoryInfo .wrapperAlwaysDisplayed {
+.repositoryInfo .wrapperWithCheckBox {
-  width: 70%;
+  width: 15%;
-  margin: auto;
+  margin: 0;
+  margin: auto 0;
 }
 
 .repositoryInfo .wrapperCollapsed {
@@ -49,12 +55,6 @@ a {
   margin: auto 0;
 }
 
-.repositoryInfo .wrapperWithCheckBox {
-  width: 15%;
-  margin: 0;
-  margin: auto 0;
-}
-
 .repositoryInfo .repositoryDetail {
   margin: 5%;
   padding: 15px;
@@ -111,6 +111,11 @@ a {
   padding: 0 15px;
 }
 
+.repositoryInfo .tagSearchCard {
+  margin: 5%;
+  padding: 15px;
+}
+
 .repositoryInfo .tagCard {
   margin: 5%;
   padding: 15px;

src/style/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.sass",
         "_variables.sass",