@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

package/react/components/smartDesktopDesigner/css/export.css

@@ -1,163 +1,176 @@
-.export-methods {
-	display: flex;
-	margin-top: 4em;
-	margin-left: -1.8em;
-	margin-right: -1.8em;
-}
-
-.export-methods .export-method {
-	padding: 1.8em;
-	/*min-height: 20em;*/
-	display: flex;
-	justify-content: flex-start;
-	flex-direction: column;
-	flex-basis: 0;
-	flex-grow: 1;
-	position: relative; /* Creating an offset parent for the buttons in these blocks */
-}
-
-.export-publish-url {
-	text-align: center;
-	display: flex;
-	align-items: center;
-}
-
-.export-publish-url input {
-	width: 428px;
-	margin-left: 1em;
-}
-
-.export-method:first-child {
-	border-right: 1px solid #979797;
-}
-
-/* .export-method-actions button {
-	display: block;
-	position: absolute;
-	bottom: 1em;
-	right: 2em;
-} */
-
-.export-method-actions {
-	margin: 0px 1em;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.export-method h2 {
-	margin-bottom: 1.6em;
-}
-
-.export-publish-uploaded p {
-	margin-left: 1em;
-	margin-top: 2em;
-}
-
-.export-publish-uploaded input[type="text"] {
-	background-color: #22262f;
-}
-
-/* May be dead */
-.export-publish-progress-indicator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* May be dead */
-.export-publish-progress-indicator > div {
-	width: 5em;
-}
-
-.export-publish-progress {
-	padding-left: 60px;
-}
-
-.publish-progress-container {
-	display: flex;
-	margin-top: 0.9em;
-	margin-bottom: 0.9em;
-	margin-left: 8em;
-	align-items: center;
-}
-
-.publish-progress-icon {
-	margin-right: 0.9em;
-	width: 26px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.publish-progress-text {
-	opacity: 75%;
-}
-
-.publish-progress-indicator {
-	width: 1.5em;
-	height: 1.5em;
-}
-
-.publish-progress-pending {
-	border: 0.25em solid #ccc;
-	width: 1.5em;
-	height: 1.5em;
-	border-radius: 1em;
-	opacity: 0.5;
-	animation: progress-pending 1s ease-in-out infinite;
-}
-
-.publish-progress-error-icon {
-	color: #f26666;
-}
-
-.publish-progress-success-icon {
-	color: #2cc13f;
-	font-size: 18px;
-}
-
-.export-publish-has-error .publish-progress-pending {
-	opacity: 0;
-	animation: none;
-}
-
-@keyframes progress-pending {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 0.75;
-	}
-}
-
-.export-method-button {
-	background-color: #42a5ba;
-	border-radius: 3px;
-}
-
-.export-method-button:hover {
-	background-color: #36788b;
-}
-
-.export-publish-error button:not(:last-child) {
-	margin-right: 1em;
-}
-
-.export-error-actions {
-	float: right;
-}
-.export-error-btn {
-	margin-left: 0.625em;
-}
-
-.last-export-error {
-	color: #da5c5c;
-}
-
-.last-export-time-icon {
-	color: #2cc13f;
-}
-
-.deployInfoContainer {
-	margin-top: 10px;
-}
+.export-block {
+	max-width: 500px;
+}
+
+.export-block p {
+	margin-right: 60px;
+	margin-left: 0px;
+}
+
+.export-methods .export-method {
+	display: flex;
+	justify-content: flex-start;
+	flex-direction: column;
+	flex-basis: 0;
+	flex-grow: 1;
+	position: relative; /* Creating an offset parent for the buttons in these blocks */
+}
+
+.export-publish-url {
+	text-align: center;
+	display: flex;
+	align-items: center;
+}
+
+.export-publish-url input {
+	width: 428px;
+	margin-left: 1em;
+}
+
+.export-method-actions {
+	margin: 0px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.export-method h2 {
+	margin-bottom: 1.6em;
+}
+
+.export-publish-uploaded p {
+	margin-left: 1em;
+	margin-top: 2em;
+}
+
+.export-publish-uploaded input[type="text"] {
+	background-color: #22262f;
+}
+
+/* May be dead */
+.export-publish-progress-indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* May be dead */
+.export-publish-progress-indicator > div {
+	width: 5em;
+}
+
+.export-publish-progress {
+	padding-left: 60px;
+}
+
+.publish-progress-container {
+	display: flex;
+	margin-top: 0.9em;
+	margin-bottom: 0.9em;
+	margin-left: 8em;
+	align-items: center;
+}
+
+.publish-progress-icon {
+	margin-right: 0.9em;
+	width: 26px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.publish-progress-text {
+	opacity: 75%;
+}
+
+.publish-progress-indicator {
+	width: 1.5em;
+	height: 1.5em;
+}
+
+.publish-progress-pending {
+	border: 0.25em solid #ccc;
+	width: 1.5em;
+	height: 1.5em;
+	border-radius: 1em;
+	opacity: 0.5;
+	animation: progress-pending 1s ease-in-out infinite;
+}
+
+.publish-progress-error-icon {
+	color: #f26666;
+}
+
+.publish-progress-success-icon {
+	color: #2cc13f;
+	font-size: 18px;
+}
+
+.export-publish-has-error .publish-progress-pending {
+	opacity: 0;
+	animation: none;
+}
+
+@keyframes progress-pending {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 0.75;
+	}
+}
+
+.export-method-button {
+	background-color: #42a5ba;
+	border-radius: 3px;
+}
+
+.export-method-button:hover {
+	background-color: #36788b;
+}
+
+.export-publish-error button:not(:last-child) {
+	margin-right: 1em;
+}
+
+.export-error-actions {
+	float: right;
+}
+.export-error-btn {
+	margin-left: 0.625em;
+}
+
+.last-export-error {
+	color: #da5c5c;
+}
+
+.last-export-time-icon {
+	color: #2cc13f;
+}
+
+.deployInfoContainer {
+	margin-top: 10px;
+}
+
+.export-project-name {
+	display: flex;
+	align-items: center;
+	margin-top: 15px;
+}
+
+.export-project-name label {
+	flex-grow: 0;
+	margin-right: 5px;
+}
+
+.export-project-name input {
+	flex-grow: 1;
+}
+
+.export-block .complex-menu-checkbox {
+	width: 20px;
+}
+
+.export-block .complex-menu-checkbox-label {
+	color: white;
+	opacity: 0.75;
+}

package/react/components/smartDesktopDesigner/css/getting-started.css

@@ -1,6 +1,28 @@
-.getting-started-actions {
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	flex-wrap: wrap;
-}
+.getting-started-actions {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	flex-wrap: wrap;
+}
+
+.hero {
+	width: 100%;
+	text-align: center;
+	margin-top: 45px;
+}
+
+.hero img {
+	position: relative;
+	z-index: 2;
+}
+
+.getting-started-gray-back {
+	width: 100%;
+	position: absolute;
+	z-index: 1;
+	top: 487px;
+	height: 100px;
+	background: linear-gradient(#6e7178, #373b43);
+}
+
+@import url("./appearance.css");

package/react/components/smartDesktopDesigner/css/nav.css

@@ -1,93 +1,120 @@
-.nav-container {
-	height: 100%;
-	background-color: #22262f;
-	min-width: 18.3em;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-.nav {
-	list-style: none;
-	padding: 0px;
-	margin: 0px;
-	height: 100%;
-}
-
-.nav-anchor {
-	align-self: center;
-}
-
-.export-method-button {
-	background-color: #42a5ba;
-}
-
-.nav-anchor button {
-	background-color: #42a5ba;
-}
-
-.nav-anchor button:hover {
-	background-color: #36788b;
-}
-
-.nav-anchor-reset button {
-	color: #f26666;
-}
-
-.nav-anchor-reset button:hover {
-	text-decoration: underline;
-}
-
-.bottom-nav-wrapper {
-	display: flex;
-	justify-content: space-evenly;
-	width: 100%;
-	position: sticky;
-	bottom: 20px;
-}
-
-.nav-item {
-	padding: 0px;
-	margin: 0px;
-}
-
-.nav-item a {
-	width: 85%;
-	color: #ddd;
-	display: flex;
-	align-items: center;
-	padding: 0.75em 2.4rem 0.75em 2.5rem;
-	/* border-bottom: 1px solid #CCC; */
-	background-color: rgba(255, 255, 255, 0);
-	text-decoration: none;
-	user-select: none;
-	cursor: default;
-	/* margin-top: 1em;
-	margin-bottom: 1em; */
-	border-top-right-radius: 2em;
-	border-bottom-right-radius: 2em;
-	transition: all 0.25s;
-	font-weight: bold;
-	white-space: nowrap;
-	position: relative;
-}
-
-.nav-item:hover a {
-	background-color: #373b43;
-}
-
-.nav-item.active a {
-	background-color: #3d4455;
-}
-
-.nav-icon {
-	font-size: 1.3rem;
-	margin-right: 10px;
-}
-
-.nav-error-icon {
-	position: absolute;
-	left: 5px;
-	top: 11px;
-}
+.nav-container {
+	height: 100%;
+	background-color: #171a20;
+	min-width: 18.3em;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding-top: 50px;
+}
+
+.nav {
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+	height: 100%;
+}
+
+.nav-anchor {
+	align-self: center;
+}
+
+.export-method-button {
+	background-color: #42a5ba;
+}
+
+.nav-anchor button {
+	background-color: #42a5ba;
+}
+
+.nav-anchor button:hover {
+	background-color: #36788b;
+}
+
+.nav-anchor-reset .button-container-danger button {
+	color: white;
+	border-color: white;
+}
+
+.nav-anchor-reset {
+	text-align: center;
+}
+
+.nav-anchor-reset .button-container-danger button:hover {
+	color: #f26666;
+	border-color: #f26666;
+	background-color: transparent;
+}
+
+.nav-anchor-reset .version-info {
+	font-style: italic;
+	margin-bottom: 15px;
+}
+
+.bottom-nav-wrapper {
+	display: flex;
+	justify-content: space-evenly;
+	width: 100%;
+	margin-top: 80px;
+}
+
+.nav-item {
+	padding: 0px;
+	margin: 0px;
+}
+
+.nav-item a {
+	width: 50%;
+	margin-left: 10px;
+	color: #ddd;
+	display: flex;
+	align-items: center;
+	padding: 0.75em 2.4rem 0.75em 2.5rem;
+	background-color: rgba(255, 255, 255, 0);
+	text-decoration: none;
+	user-select: none;
+	cursor: default;
+	border-top-left-radius: 2em;
+	border-top-right-radius: 2em;
+	border-bottom-left-radius: 2em;
+	border-bottom-right-radius: 2em;
+	transition: all 0.25s;
+	font-weight: bold;
+	white-space: nowrap;
+	position: relative;
+}
+
+.nav-item:hover a {
+	background-color: #373b43;
+}
+
+.nav-item.active a {
+	background-color: #373b43;
+}
+
+.nav-icon {
+	font-size: 1.3rem;
+	margin-right: 10px;
+}
+
+.nav-error-icon {
+	position: absolute;
+	left: 5px;
+	top: 11px;
+}
+
+.nav-section {
+	width: 100%;
+	margin-bottom: 30px;
+}
+
+.nav-label {
+	opacity: 0.75;
+	border-bottom: 1px solid white;
+	width: 100%;
+	margin-left: 20px;
+	margin-bottom: 10px;
+}
+
+@import url("./appearance.css");

package/react/components/smartDesktopDesigner/css/project-errors.css

@@ -1,15 +1,15 @@
-.project-error {
-	margin-bottom: 5px;
-	display: flex;
-	align-items: center;
-}
-
-.project-error-icon {
-	color: #f5a623;
-	font-size: 1.3rem;
-	margin-right: 0.5em;
-}
-
-.project-errors-container {
-	margin-left: 1em;
-}
+.project-error {
+	margin-bottom: 5px;
+	display: flex;
+	align-items: center;
+}
+
+.project-error-icon {
+	color: #f5a623;
+	font-size: 1.3rem;
+	margin-right: 0.5em;
+}
+
+.project-errors-container {
+	margin-left: 1em;
+}