Project Template details and preview changes

Code/Tools/ProjectManager/Resources/ArrowBack_Hover.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.02554 10L9 15.0362V18L0 9L9 0V2.98885L4 8H18V10H4.02554Z" fill="#1e70eb"/>
+</svg>

Code/Tools/ProjectManager/Resources/DefaultTemplate.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8358f4dad9878c662b9819b2b346622af691eb45f8eddc28fff79a50650ae6cf
+size 2503

Code/Tools/ProjectManager/Resources/ProjectManager.qrc

@@ -7,6 +7,7 @@
         <file>AddOffset.svg</file>
         <file>AddOffset_Hover.svg</file>
         <file>ArrowBack.svg</file>
+        <file>ArrowBack_Hover.svg</file>
         <file>build.svg</file>
         <file>FolderOffset.svg</file>
         <file>FolderOffset_Hover.svg</file>
@@ -18,6 +19,7 @@
         <file>Linux.svg</file>
         <file>macOS.svg</file>
         <file>DefaultProjectImage.png</file>
+        <file>DefaultTemplate.png</file>
         <file>ArrowDownLine.svg</file>
         <file>ArrowUpLine.svg</file>
         <file>o3de.svg</file>

Code/Tools/ProjectManager/Resources/ProjectManager.qss

@@ -136,11 +136,9 @@ QTabBar::tab:pressed
 #header QPushButton:focus {
     border:none;
 }
-#header QPushButton:hover {
-    background:#333333 url(:/ArrowBack.svg) no-repeat center;
-}
+#header QPushButton:hover,
 #header QPushButton:pressed {
-    background:#222222 url(:/ArrowBack.svg) no-repeat center;
+    background:transparent url(:/ArrowBack_Hover.svg) no-repeat center;
 }
 
 #headerTitle {
@@ -210,9 +208,6 @@ QTabBar::tab:pressed
 
 #projectTemplate {
     margin: 55px 0 0 50px;
-    max-width: 780px;
-    min-height:200px;
-    max-height:200px;
 }
 #projectTemplateLabel {
     font-size:16px;
@@ -227,11 +222,67 @@ QTabBar::tab:pressed
 
 #projectTemplateDetails {
     background-color:#444444;
-    max-width:240px;
+    max-width:20%;
     min-width:240px;
     margin-left:30px;
 }
 
+#projectTemplateDetails #displayName,
+#projectTemplateDetails #includedGemsTitle {
+    font-size:18px;
+}
+
+#projectTemplateDetails #moreGems {
+    font-size:14px;
+    margin-top:20px;
+}
+
+#projectTemplateDetails #includedGemsTitle {
+    margin-top:5px;
+    margin-bottom:5px;
+}
+
+#projectTemplateDetails #summary {
+    padding-bottom:0px;
+    border-bottom:2px solid #555555;
+	min-height:80px;
+    qproperty-alignment: AlignTop;
+}
+
+#projectTemplateDetails #browseCatalog {
+    margin:5px 0px 15px 0px;
+}
+
+#projectTemplate QPushButton {
+    qproperty-flat: true;
+    min-width: 96px;
+    max-width: 96px;
+    min-height: 160px;
+    max-height: 160px;
+}
+#projectTemplate #templateLabel {
+    qproperty-alignment: AlignCenter;
+}
+#projectTemplate QPushButton #templateImage {
+    border:3px solid transparent;
+    border-radius: 4px;
+}
+#projectTemplate QPushButton[Checked="true"] #templateImage {
+    border:3px solid #1e70eb;
+}
+#projectTemplate QPushButton[Checked="true"] #templateLabel {
+    font-weight:bold;
+}
+#projectTemplate QPushButton:hover {
+    background-color: #444444;
+}
+#projectTemplate QPushButton:focus {
+    outline: none;
+    border:none;
+}
+
+
+
 #projectSettingsTab::tab-bar {
     left: 60px;
 }