Merge branch 'main' of github.com:anyproto/anytype-ts into feature/native-messaging-host

src/json/text.json

@@ -320,6 +320,8 @@
     "usecase2Label": "Create your own base of knowledge with books, movies, recipes, and more",
     "usecase3Title": "Diary and Quick notes",
     "usecase3Label": "Keep your daily notes and self-reflections secure and private",
+    "usecase4Title": "Strategic Thinking",
+    "usecase4Label": "Structure and present your thoughts effectively. A dedicated dashboard for your writings",
 
     "pageMainUsecaseTitle": "How would you like to start?",
     "pageMainUsecaseLabel": "We'll load some templates to get you started",

src/scss/page/main/usecase.scss

@@ -1,12 +1,12 @@
 @import "~scss/_vars";
 
 .pageMainUsecase {
-	.frame { width: 830px; box-shadow: 0px 6px 24px rgba(0,0,0,0.2); border-radius: 12px; padding: 44px 48px 36px; text-align: left; }
+	.frame { width: 1082px; box-shadow: 0px 6px 24px rgba(0,0,0,0.2); border-radius: 12px; padding: 44px 48px 36px; text-align: left; }
 	.frame {
 		> .title { @include text-header1; margin-bottom: 8px; }
 		> .label { color: $colorDarkGrey; margin-bottom: 18px; }
 
-		.list { display: grid; gap: 0px 16px; margin-bottom: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+		.list { display: grid; gap: 0px 16px; margin-bottom: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
 		.list {
 			.item { 
 				position: relative; overflow: hidden; min-height: 236px; transition: $transitionAllCommon; 

src/scss/popup/settings.scss

@@ -107,10 +107,7 @@
 				.label.small, .label.section { @include text-small; }
 				.label.section { margin: 30px 0px 4px 0px; }
 
-				.select { border: 0px; color: $colorDarkGrey;  cursor: default; }
-				.select {
-					.icon.arrow { margin: 0px !important; top: 3px; }
-				}
+				.select { padding-left: 10px; }
 
 				.name { width: 100%; }
 				.name {
@@ -220,10 +217,10 @@
 
 					.sectionContent { border-radius: 12px; border: 1px solid $colorBorderLight; overflow: hidden; }
 					.sectionContent {
-						.item { padding: 16px; border-bottom: 1px solid $colorBorderLight; }
-						.item:last-child { border-bottom: 0; }
+						> .item { padding: 16px; border-bottom: 1px solid $colorBorderLight; }
+						> .item:last-child { border-bottom: 0; }
 
-						.item {
+						> .item {
 							.sides { display: flex; justify-content: space-between; }
 							.sides {
 								.side { width: unset; background: unset; padding: unset; }
@@ -250,7 +247,7 @@
 
 				.section.sectionSpaceManager {
 					.sectionContent {
-						.item {
+						> .item {
 							.storageLabel { margin-bottom: 12px; line-height: 18px; }
 							.storageLabel {
 								.label { display: inline; }
@@ -260,7 +257,7 @@
 								.fill { background: $colorLime; }
 							}
 						}
-						.item.red {
+						> .item.red {
 							.progressBar {
 								.fill { background: $colorRed; }
 							}
@@ -270,9 +267,9 @@
 
 				.section.sectionIntegrations {
 					.sectionContent {
-						.item { transition: $transitionAllCommon; }
-						.item:hover { background: $colorHoverLight; }
-						.item {
+						> .item { transition: $transitionAllCommon; }
+						> .item:hover { background: $colorHoverLight; }
+						> .item {
 							.side.left { display: flex; gap: 0 12px; }
 							.side.left {
 								.icon { width: 22px; height: 22px; }
@@ -285,11 +282,11 @@
 
 				.section.sectionInfo {
 					.sectionContent {
-						.item {
+						> .item {
 							.sides { align-items: center; }
 							.icon { width: 22px; height: 22px; margin-right: 2px; opacity: 0; transition: $transitionAllCommon; }
 						}
-						.item:hover {
+						> .item:hover {
 							.icon { opacity: 1; }
 						}
 					}

src/ts/component/page/main/usecase.tsx

@@ -70,6 +70,7 @@ const PageMainUsecase = observer(class PageMainUsecase extends React.Component<I
 			{ id: I.Usecase.Personal, img: 'img/usecase/personal-projects.png' },
 			{ id: I.Usecase.Notes, img: 'img/usecase/notes-or-diary.png' },
 			{ id: I.Usecase.Knowledge, img: 'img/usecase/knowledge-base.png' },
+			{ id: I.Usecase.Strategic, img: 'img/usecase/strategic.png' },
 		]);
 	};
 
@@ -95,4 +96,4 @@ const PageMainUsecase = observer(class PageMainUsecase extends React.Component<I
 
 });
 
-export default PageMainUsecase;
+export default PageMainUsecase;

src/ts/component/popup/page/settings/space/index.tsx

@@ -124,9 +124,11 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
 										<Label text={translate(`popupSettingsSpaceIndexHomepageDescription`)} />
 									</div>
 									<div className="side right">
-										<div onClick={this.onDashboard} id="dashboard" className="button blank c28">
-											<div className="txt">{home ? home.name : 'Select'}</div>
-											<Icon className="arrow down" />
+										<div id="dashboard" className="select" onClick={this.onDashboard}>
+											<div className="item">
+												<div className="name">{home ? home.name : translate('commonSelect')}</div>
+											</div>
+											<Icon className="arrow black" />
 										</div>
 									</div>
 								</div>

src/ts/interface/common.ts

@@ -122,6 +122,7 @@ export enum Usecase {
 	Personal	 = 1,
     Knowledge	 = 2,
     Notes		 = 3,
+	Strategic 	 = 4,
 };
 
 export enum HomePredefinedId {

src/ts/lib/util/common.ts

@@ -598,7 +598,7 @@ class UtilCommon {
 		if (parts && parts.length) {
 			parts = parts.map((it: any) => {
 				if (it.type == 'group') {
-					it.value = ' ';
+					it.value = ' ';
 				};
 				return it.value;
 			});