Refactor CSS (some pages and components)

src/renderer/assets/css/_spacing.sass

@@ -17,3 +17,19 @@
 @for $i from 1 through 10
 	.m-#{$i}
 		margin: $i + rem
+
+@for $i from 1 through 10
+	.mt-#{$i}
+		margin-top: $i + rem
+
+@for $i from 1 through 10
+	.ml-#{$i}
+		margin-left: $i + rem
+
+@for $i from 1 through 10
+	.mb-#{$i}
+		margin-bottom: $i + rem
+
+@for $i from 1 through 10
+	.mr-#{$i}
+		margin-right: $i + rem

src/renderer/assets/css/_utilities.sass

@@ -1,5 +1,7 @@
+@import "utilities/alignment"
 @import "utilities/cursor"
 @import "utilities/display"
 @import "utilities/flex"
+@import "utilities/overflow"
 @import "utilities/scrollbar"
 @import "utilities/settings"

src/renderer/assets/css/utilities/_alignment.sass

@@ -0,0 +1,8 @@
+.text-left
+  text-align: left
+.text-center
+  text-align: center
+.text-right
+  text-align: right
+.text-justify
+  text-align: justify

src/renderer/assets/css/utilities/_display.sass

@@ -4,6 +4,17 @@
 .d-flex
 	display: flex
 
+.static
+	position: static
+.fixed
+	position: fixed
+.absolute
+	position: absolute
+.relative
+	position: relative
+.sticky
+	position: sticky
+
 .opacity-0
 	opacity: 0
 

src/renderer/assets/css/utilities/_overflow.sass

@@ -0,0 +1,40 @@
+.overflow-auto
+  overflow: auto
+
+.overflow-hidden
+  overflow: hidden
+
+.overflow-visible
+  overflow: visible
+
+.overflow-scroll
+  overflow: scroll
+
+.overflow-x-auto
+  overflow-x: auto
+
+.overflow-y-auto
+  overflow-y: auto
+
+.overflow-x-hidden
+  overflow-x: hidden
+
+.overflow-y-hidden
+  overflow-y: hidden
+
+.overflow-x-visible
+  overflow-x: visible
+
+.overflow-y-visible
+  overflow-y: visible
+
+.overflow-x-scroll
+  overflow-x: scroll
+
+.overflow-y-scroll
+  overflow-y: scroll
+
+.scrolling-touch
+  -webkit-overflow-scrolling: touch
+.scrolling-auto
+  -webkit-overflow-scrolling: auto

src/renderer/components/TLayouts/TScrollbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<vue-scrollbar :style="{ height: height, width: width }">
+	<vue-scrollbar :style="{ height: height, width: width, margin: 0 }">
 		<slot />
 	</vue-scrollbar>
 </template>
@@ -20,6 +20,10 @@ export default {
 		width: {
 			type: String,
 			default: null
+		},
+		padding: {
+			type: String,
+			default: null
 		}
 	}
 };

src/renderer/components/commit/commitHistoryItem.vue

@@ -94,13 +94,14 @@ export default {
 <style lang="sass">
 .history
 	&__item
-		padding: 10px
+		padding: 14px
 		font-size: 12px
 		border-bottom: 1px solid #DEE0E3
 
 		&__title
 			margin-bottom: 6px
 			color: black
+			font-weight: 500
 
 		&__author
 			font-size: 10px

src/renderer/components/diff/diffPreview.vue

@@ -1,5 +1,5 @@
 <template>
-	<t-scrollbar height="90vh">
+	<t-scrollbar padding="0.5rem" height="90vh">
 		<div>
 			<div v-for="(line, index) in preview" :key="index">
 				{{ line }}

src/renderer/components/navbar.vue

@@ -246,5 +246,5 @@ export default {
 
 		.navbar__item
 			&:not(:last-child)
-				margin-right: 15px
+				margin-right: .7rem
 </style>

src/renderer/components/sidebar.vue

@@ -59,7 +59,7 @@ export default {
 
 		&__item
 			padding: 3px 20px
-			margin-bottom: 5px
+			margin-bottom: .3rem
 
 			svg
 				width: 20px

src/renderer/pages/repository/workspace.vue

@@ -1,12 +1,8 @@
 <template>
 	<t-flexbox flex-direction="row" :flex-grow="1">
-		<div ref="workspaceFiles" class="workspace__files">
-			<t-flexbox flex-direction="column" style="overflow: hidden;">
-				<t-flexbox
-					ref="branchName"
-					align-items="center"
-					class="workspace__branch"
-				>
+		<div ref="workspaceFiles" class="workspace">
+			<t-flexbox flex-direction="column" class="overflow-hidden">
+				<t-flexbox ref="branchName" align-items="center" class="title-branch">
 					<branchIcon />
 					<p>{{ this.$store.state.commit.activeBranch }}</p>
 				</t-flexbox>
@@ -21,30 +17,26 @@
 						<t-flexbox
 							v-for="file in this.$store.getters['commit/allFiles']"
 							:key="file.path"
-							class="workspace__changes__item"
+							class="changes__item"
 							align-items="center"
-							@click="previewFileChange(file)"
+							@click.native="previewFileChange(file)"
 						>
 							<input
 								v-show="getFeatureValue.commit"
 								v-model="stagedFile"
-								class="workspace__changes__item__checkbox"
+								class="checkbox"
 								type="checkbox"
 								:value="file.path"
 							/>
-							<label :title="file.path" :for="file.path">
+							<label class="cursor-pointer" :title="file.path" :for="file.path">
 								<t-flexbox>
-									<p class="workspace__changes__item__path__name">
-										{{ filePath(file.path) }}
-									</p>
-									<p class="workspace__changes__item__path__file">
-										{{ fileName(file.path) }}
-									</p>
+									<p class="path__name">{{ filePath(file.path) }}</p>
+									<p class="path__file">{{ fileName(file.path) }}</p>
 								</t-flexbox>
 							</label>
 							<div
 								:style="'background-color: #' + fileTypeColor(file)"
-								class="workspace__changes__item__type ml-auto"
+								class="type ml-auto"
 							>
 								{{ fileType(file) }}
 							</div>
@@ -223,11 +215,12 @@ export default {
 
 <style lang="sass">
 .workspace
-	&__files
-		border-right: 1px solid #DEE0E3
-		width: 300px
+	border-right: 1px solid #DEE0E3
+	width: 300px
+	max-width: 300px
+	min-width: 300px
 
-	&__branch
+	.title-branch
 		background-color: #EFEFEF
 		padding: 10px 20px
 		border-bottom: 1px solid #DEE0E3
@@ -242,22 +235,21 @@ export default {
 			font-size: 14px
 			font-weight: 600
 
-	&__changes
+	.changes
 		&__item
-			border-bottom: 1px solid #DEE0E3
+			padding: .8rem 10px
 			font-size: 12px
 			color: #2E3034
-			padding: 6px 10px
 			cursor: pointer
 
-			&__checkbox
+			.checkbox
 				margin-right: 5px
 
-			&__path
+			.path
 				&__name
 					color: #BEBEBE
 
-			&__type
+			.type
 				padding: 3px 5px
 				color: white
 				border-radius: 3px

src/renderer/pages/settings/experimental.vue

@@ -1,17 +1,13 @@
 <template>
 	<div class="experimental">
 		<h4>Experimental Features</h4>
-		<div class="experimental__warning">
+		<div class="warning">
 			Experimental features are projects/features that aren't quite ready. They
 			may break (or disapper) at any time. Let us know what you think on our
 			<a @click="discordURL()">Thermal Discord server</a>.
 		</div>
-		<div class="settings__section__group">
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="settings__section__group__item"
-			>
+		<div class="section__group">
+			<t-flexbox flex-direction="row" align-items="center" class="item">
 				<div>
 					<h6>File changes</h6>
 					<p>
@@ -25,16 +21,10 @@
 					class="ml-auto"
 				/>
 			</t-flexbox>
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="settings__section__group__item"
-			>
+			<t-flexbox flex-direction="row" align-items="center" class="item">
 				<div>
 					<h6>Quick file preview</h6>
-					<p>
-						Toggle quick file preview for commit logs.
-					</p>
+					<p>Toggle quick file preview for commit logs.</p>
 				</div>
 				<toggle-button
 					v-model="toggleQuickFilePreview"
@@ -97,11 +87,16 @@ export default {
 <style lang="sass">
 .experimental
 
-	&__warning
+	.warning
 		padding: 1rem 0
 		font-size: 12px
 		color: #6C6F75
 
 		a
 			border-bottom: 1px solid #00adb5
+
+	.section__group
+		.item
+			&:not(:first-child)
+					margin-top: 1rem
 </style>

src/renderer/pages/settings/index.vue

@@ -4,7 +4,7 @@
 		<div class="w-100">
 			<t-scrollbar height="95vh">
 				<t-container>
-					<div class="settings__content">
+					<div class="content">
 						<router-view />
 					</div>
 				</t-container>
@@ -31,7 +31,7 @@ export default {
 <style lang="sass">
 .settings
 	height: 95vh
-	&__content
+	.content
 		margin-top: 2rem
 		padding: 20px
 </style>

src/renderer/pages/settings/information.vue

@@ -1,15 +1,11 @@
 <template>
 	<div class="information">
-		<div
-			v-for="section in information"
-			:key="section.name"
-			class="information__section"
-		>
+		<div v-for="section in information" :key="section.name" class="section">
 			<h5>{{ section.name }}</h5>
 			<table class="table">
-				<tbody class="table__item-container">
-					<tr v-for="item in section.data" :key="item.info" class="table__item">
-						<td v-for="info in item" :key="info" class="table__item-line">
+				<tbody class="item-container">
+					<tr v-for="item in section.data" :key="item.info" class="item">
+						<td v-for="info in item" :key="info" class="item-line">
 							{{ info }}
 						</td>
 					</tr>
@@ -69,15 +65,16 @@ export default {
 		margin-bottom: 1.5rem
 		width: 100%
 
-		&__item
+		.item
 			display: flex
 			justify-content: space-between
-			border-bottom: 1px solid #EFEFEF
+			margin-top: 1.2rem
+    	padding: 0.2rem
 
 			&:hover
 				background-color: #DEE0E3
 
-		&__item-line
+		.item-line
 			padding: .4rem
 
 			&:first-child