update for files list icon extension

components/questionnaire/forms/FilesList.js

@@ -99,8 +99,9 @@ export default class FilesList extends React.Component
 
 	_renderFileType = (file) => 
 	{
-		return file.name.split(".").pop();
+		return file.name?.split(".")?.pop()?.toString()?.substr(0, 3);
 	}
+
 	render() 
 	{
 		const { files, checking, title, maxFiles = 5, } = this.props;

css/var.css

@@ -426,9 +426,6 @@ div {
 .extension[data-format] {
   background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
   position: relative;
-  min-height: 50px!important;
-  background-size: 50px!important;
-  padding-left: 58px!important;
 }
 .extension[data-format]:before {
   content: attr(data-format);
@@ -440,20 +437,18 @@ div {
   bottom: 1px;
   top: 0;
   font-size: 10px;
-  width: 48px!important;
+  width: 35px;
   display: flex;
   align-content: center;
   justify-content: center;
   align-items: center;
   text-transform: uppercase;
   word-break: break-all;
-  text-align: center;
 }
 @media all and (max-width: 1600px) and (min-width: 1280px) {
   .extension[data-format] {
     padding-left: 56px;
     background-size: 42px;
-    height: 50px!important;
   }
   .extension[data-format]:before {
     width: 27px;
@@ -466,12 +461,11 @@ div {
     padding-left: 42px;
     background-size: 32px;
     background-position: 0 5px;
-    min-height: 58px!important;
   }
   .extension[data-format]:before {
     font-size: 7px;
     width: 24px;
-    height: 60px !important;
+    height: 42px;
     line-height: 11px;
     text-align: center;
     left: 4px;
@@ -576,3 +570,58 @@ div {
   -webkit-user-select: none;
   -ms-user-select: none;
 }
+.uploaded_extension[data-format] {
+  background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
+  position: relative;
+  min-height: 50px!important;
+  background-size: 50px!important;
+  padding-left: 58px!important;
+}
+.uploaded_extension[data-format]:before {
+  content: attr(data-format);
+  color: #fff;
+  font-weight: 700;
+  position: absolute;
+  left: 10px;
+  right: 1px;
+  bottom: 1px;
+  top: 0;
+  font-size: 10px;
+  width: 48px!important;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  word-break: break-all;
+  text-align: center;
+}
+@media all and (max-width: 1600px) and (min-width: 1280px) {
+  .uploaded_extension[data-format] {
+    padding-left: 56px;
+    background-size: 42px;
+    height: 50px!important;
+  }
+  .uploaded_extension[data-format]:before {
+    width: 27px;
+    font-size: 8px;
+    left: 8px;
+  }
+}
+@media all and (max-width: 960px) {
+  .uploaded_extension[data-format] {
+    padding-left: 42px;
+    background-size: 32px;
+    background-position: 0 5px;
+    min-height: 58px!important;
+  }
+  .uploaded_extension[data-format]:before {
+    font-size: 7px;
+    width: 24px;
+    height: 60px !important;
+    line-height: 11px;
+    text-align: center;
+    left: 4px;
+    right: 5px;
+  }
+}

css/var.less

@@ -453,9 +453,6 @@ div {
 	{
 		background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
 		position: relative;
-		min-height: 50px!important;
-		background-size: 50px!important;
-		padding-left: 58px!important;
 
 		&:before {
 			content: attr(data-format);
@@ -467,20 +464,18 @@ div {
 			bottom: 1px;
 			top: 0;
 			font-size: 10px;
-			width: 48px!important;
+			width: 35px;
 			display: flex;
 			align-content: center;
 			justify-content: center;
 			align-items: center;
 			text-transform: uppercase;
-			word-break: break-all;
+      word-break: break-all;
-			text-align: center;
 		}
 
 		@media all and (max-width: 1600px) and (min-width: 1280px) {
 			padding-left: 56px;
 			background-size: 42px;
-			height: 50px!important;
 
 			&:before {
 				width: 27px;
@@ -488,21 +483,20 @@ div {
 				left: 8px;
 			}
 		}
-
+		
 		@media all and (max-width: 960px) {
 			padding-left: 42px;
 			background-size: 32px;
 			background-position: 0 5px;
-			min-height: 58px!important;
 
 			&:before {
-				font-size: 7px;
+        font-size: 7px;
-				width: 24px;
+        width: 24px;
-				height: 60px !important;
+        height: 42px;
-				line-height: 11px;
+        line-height: 11px;
-				text-align: center;
+        text-align: center;
-				left: 4px;
+        left: 4px;
-				right: 5px;
+        right: 5px;
 			}
 		}
 	}
@@ -612,4 +606,65 @@ div {
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
+}
+
+.uploaded_extension 
+{
+	&[data-format] 
+	{
+		background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
+		position: relative;
+		min-height: 50px!important;
+		background-size: 50px!important;
+		padding-left: 58px!important;
+
+		&:before {
+			content: attr(data-format);
+			color: #fff;
+			font-weight: 700;
+			position: absolute;
+			left: 10px;
+			right: 1px;
+			bottom: 1px;
+			top: 0;
+			font-size: 10px;
+			width: 48px!important;
+			display: flex;
+			align-content: center;
+			justify-content: center;
+			align-items: center;
+			text-transform: uppercase;
+			word-break: break-all;
+			text-align: center;
+		}
+
+		@media all and (max-width: 1600px) and (min-width: 1280px) {
+			padding-left: 56px;
+			background-size: 42px;
+			height: 50px!important;
+
+			&:before {
+				width: 27px;
+				font-size: 8px; 
+				left: 8px;
+			}
+		}
+
+		@media all and (max-width: 960px) {
+			padding-left: 42px;
+			background-size: 32px;
+			background-position: 0 5px;
+			min-height: 58px!important;
+
+			&:before {
+				font-size: 7px;
+				width: 24px;
+				height: 60px !important;
+				line-height: 11px;
+				text-align: center;
+				left: 4px;
+				right: 5px;
+			}
+		}
+	}
 }