chore: beautification (#929)

DARPA-ASKEM · Mar 28, 2023 · d284383 · d284383
1 parent b5c1741
commit d284383
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_checkbox.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_checkbox.scss
@@ -23,8 +23,8 @@
             .p-checkbox-icon.pi-check:before {
                 content: "";
                 position: absolute;
-                top: 6px;
-                left: 1px;
+                top: 8px;
+                left: 2px;
                 border-right: 2px solid transparent;
                 border-bottom: 2px solid transparent;
                 transform: rotate(45deg);

diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue
@@ -296,6 +296,8 @@ const removeProject = (projectId: IProject['id']) => {
 	overflow-x: hidden;
 	flex: 1;
 	padding: 0;
+	display: flex;
+	flex-direction: column;
 }
 
 section {
@@ -308,6 +310,7 @@ section {
 	background: linear-gradient(180deg, #8bd4af1a, #d5e8e5);
 	padding: 1rem;
 	border-top: 1px solid var(--gray-100);
+	flex-grow: 1;
 }
 
 .papers p {

diff --git a/packages/client/hmi-client/src/page/data-explorer/components/asset-card.vue b/packages/client/hmi-client/src/page/data-explorer/components/asset-card.vue
@@ -255,7 +255,8 @@ function startDrag(asset, resourceType) {
 <style scoped>
 .asset-card {
 	background-color: var(--surface-a);
-	border: 1px solid transparent;
+	border: 1px solid var(--surface-border-light);
+	border-radius: var(--border-radius);
 	color: var(--text-color-subdued);
 	display: flex;
 	font-size: var(--font-caption);

diff --git a/packages/client/hmi-client/src/page/data-explorer/components/search-bar.vue b/packages/client/hmi-client/src/page/data-explorer/components/search-bar.vue
@@ -64,6 +64,7 @@
 						v-if="searchByExampleSelectedAsset && searchByExampleSelectedResourceType"
 						:asset="searchByExampleSelectedAsset"
 						:resourceType="searchByExampleSelectedResourceType"
+						class="asset-card-in-searchByExample-dropzone"
 					>
 					</asset-card>
 					<Button
@@ -88,33 +89,33 @@
 						binary
 						v-model="selectedSearchByExampleOptions.similarContent"
 					/>
-					<label for="similarContent">Similar<br />content</label>
+					<label for="similarContent">Similar content</label>
 				</div>
 				<div class="field-checkbox">
 					<Checkbox
 						name="forwardCitation"
 						binary
 						v-model="selectedSearchByExampleOptions.forwardCitation"
 					/>
-					<label for="forwardCitation">Forward<br />citations</label>
+					<label for="forwardCitation">Forward citations</label>
 				</div>
 				<div class="field-checkbox">
 					<Checkbox
 						name="backwardCitation"
 						binary
 						v-model="selectedSearchByExampleOptions.backwardCitation"
 					/>
-					<label for="backwardCitation">Backward<br />citation</label>
+					<label for="backwardCitation">Backward citation</label>
 				</div>
 				<div class="field-checkbox">
 					<Checkbox
 						name="relatedContent"
 						binary
 						v-model="selectedSearchByExampleOptions.relatedContent"
 					/>
-					<label for="relatedContent">Related<br />resources</label>
+					<label for="relatedContent">Related resources</label>
 				</div>
-				<Button label="SEARCH" @click="initiateSearchByExample()" />
+				<Button label="Search" @click="initiateSearchByExample()" />
 			</footer>
 		</section>
 	</section>
@@ -397,7 +398,9 @@ i {
 	gap: 0.75rem;
 	pointer-events: none;
 }
-
+.asset-card-in-searchByExample-dropzone {
+	width: 100%;
+}
 .clear-search-by-example {
 	height: fit-content;
 }
@@ -408,9 +411,9 @@ i {
 }
 
 .field-checkbox {
-	font-size: var(--font-caption);
-	font-color: var(--text-color-primary);
-	align-items: flex-start;
+	font-size: var(--font-small);
+	color: var(--text-color-primary);
+	margin-bottom: 0rem;
 }
 
 .p-button.search-by-example-button {