fixed alignment with icons

fixed icon not showing correctly in tab

3 files changed, 54 insertions, 51 deletions

diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index 97bd8d48a05..ffa56ee6095 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/app/assets/javascripts/ide/components/changed_file_icon.vue
@@ -34,11 +34,11 @@ export default {
       const type = this.file.tempFile ? 'addition' : 'modification';
 
       if (this.file.changed && !this.file.staged) {
-        return `unstaged ${type}`;
+        return `Unstaged ${type}`;
       } else if (!this.file.changed && this.file.staged) {
-        return `staged ${type}`;
+        return `Staged ${type}`;
       } else if (this.file.changed && this.file.staged) {
-        return `unstaged and staged ${pluralize(type)}`;
+        return `Unstaged and staged ${pluralize(type)}`;
       }
 
       return undefined;
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index c337bc813e6..7bb02bb5e26 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,60 +1,61 @@
 <script>
-  import { mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
-  import fileIcon from '~/vue_shared/components/file_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
-  import fileStatusIcon from './repo_file_status_icon.vue';
-  import changedFileIcon from './changed_file_icon.vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import icon from '~/vue_shared/components/icon.vue';
+import fileStatusIcon from './repo_file_status_icon.vue';
+import changedFileIcon from './changed_file_icon.vue';
 
-  export default {
-    components: {
-      fileStatusIcon,
-      fileIcon,
-      icon,
-      changedFileIcon,
+export default {
+  components: {
+    fileStatusIcon,
+    fileIcon,
+    icon,
+    changedFileIcon,
+  },
+  props: {
+    tab: {
+      type: Object,
+      required: true,
     },
-    props: {
-      tab: {
-        type: Object,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      tabMouseOver: false,
+    };
+  },
+  computed: {
+    closeLabel() {
+      if (this.fileHasChanged) {
+        return `${this.tab.name} changed`;
+      }
+      return `Close ${this.tab.name}`;
     },
-    data() {
-      return {
-        tabMouseOver: false,
-      };
+    showChangedIcon() {
+      return this.fileHasChanged ? !this.tabMouseOver : false;
     },
-    computed: {
-      closeLabel() {
-        if (this.tab.changed || this.tab.tempFile) {
-          return `${this.tab.name} changed`;
-        }
-        return `Close ${this.tab.name}`;
-      },
-      showChangedIcon() {
-        return this.tab.changed ? !this.tabMouseOver : false;
-      },
+    fileHasChanged() {
+      return this.tab.changed || this.tab.tempFile || this.tab.staged;
     },
+  },
 
-    methods: {
-      ...mapActions([
-        'closeFile',
-      ]),
-      clickFile(tab) {
-        this.$router.push(`/project${tab.url}`);
-      },
-      mouseOverTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = true;
-        }
-      },
-      mouseOutTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = false;
-        }
-      },
+  methods: {
+    ...mapActions(['closeFile']),
+    clickFile(tab) {
+      this.$router.push(`/project${tab.url}`);
     },
-  };
+    mouseOverTab() {
+      if (this.fileHasChanged) {
+        this.tabMouseOver = true;
+      }
+    },
+    mouseOutTab() {
+      if (this.fileHasChanged) {
+        this.tabMouseOver = false;
+      }
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 794a2640ad1..cf8f6202611 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -498,6 +498,7 @@
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
+  padding-left: $grid-size;
 
   svg {
     margin-right: $gl-btn-padding;
@@ -770,6 +771,7 @@
 
   &:not(.is-collapsed) {
     flex: 1;
+    min-height: 140px;
   }
 }